core/stepper/stepper-progress.component.ts
| selector | c8y-stepper-progress |
| templateUrl | ./stepper-progress.component.html |
Methods |
Inputs |
Outputs |
| disabled |
Type : boolean
|
|
Disable navigation buttons |
| 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 |
| onStepClicked |
Type : EventEmitter
|
|
Emits the index: number of the step which was clicked |
| 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>