Web SDK documentation
  1. Components
  2. C8yStepperProgress

File

core/stepper/stepper-progress.component.ts

Metadata

selector c8y-stepper-progress
templateUrl ./stepper-progress.component.html

Index

Methods
Inputs
Outputs

Inputs

iconOverrides

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]"

Type : literal type

index

The index of the current step

Type : number

selected

Whether the step is cuurently selected or not

Type : boolean

state

The current state of the step

Type : StepState

Outputs

onStepClicked

Emits the index: number of the step which was clicked

$event Type: EventEmitter

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' }"
  [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 [c8yIcon]="'check'"></span>
    </span>
    <span *ngSwitchDefault> {{ index + 1 }} </span>
  </ng-container>
</button>

result-matching ""

    No results matching ""