Web SDK documentation
  1. Components
  2. C8yStepperProgress

File

core/stepper/stepper-progress.component.ts

Metadata

selector c8y-stepper-progress
standalone true
imports NgClass NgSwitch NgSwitchCase NgTemplateOutlet NgSwitchDefault IconDirective
templateUrl ./stepper-progress.component.html

Index

Methods
Inputs
Outputs

Inputs

disabled
Type : boolean

Disable navigation buttons
iconOverrides
Type : literal type

List of overriden icons as TemplateRef. Also default icons could be overriden. The given overriden icons will replace an icon with matching state: StepState

<ng-container *ngSwitchCase="true" [ngTemplateOutlet]="iconOverrides[state]"
index
Type : number

The index of the current step
selected
Type : boolean

Whether the step is currently selected or not
state
Type : StepState

The current state of the step

Outputs

onStepClicked
Type : EventEmitter

Emits the index: number of the step which was clicked

Methods

stepSelected
stepSelected()

Called on click and emits the step index

Returns : void 
<button
  type="button"
  class="c8y-step"
  [ngClass]="{
    active: selected,
    'step-done': state === 'done' || state === '_done',
    'step-error': state === 'error',
    'step-warning': state === 'warning'
  }"
  [disabled]="disabled"
  [ngSwitch]="!!(iconOverrides && iconOverrides[state])"
  (click)="stepSelected()"
>
  <ng-container *ngSwitchCase="true" [ngTemplateOutlet]="iconOverrides[state]"></ng-container>
  <ng-container *ngSwitchDefault [ngSwitch]="state">
    <span *ngSwitchCase="'edit'">
      <span [c8yIcon]="'edit'"></span>
    </span>
    <span *ngSwitchCase="'done'">
      <span class="m-t-4" [c8yIcon]="'check'"></span>
    </span>
    <span *ngSwitchCase="'error'">
      <span class="m-t-4" [c8yIcon]="'exclamation'"></span>
    </span>
    <span *ngSwitchDefault>{{ index + 1 }}</span>
  </ng-container>
</button>

results matching ""

    No results matching ""