Steps

Basic

The simplest usage.

1
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
<prism-steps [current]="0">
  <prism-step title="Finished" description="This is a description."></prism-step>
  <prism-step title="In Progress" description="This is a description."></prism-step>
  <prism-step title="Waiting" description="This is a description."></prism-step>
</prism-steps>

Switch Step

Cooperate with the system and logs.

1
First
This is a description.
2
Second
This is a description.
3
Third
This is a description.
<prism-steps [(current)]="current">
  <prism-step title="First" description="This is a description."></prism-step>
  <prism-step title="Second" description="This is a description."></prism-step>
  <prism-step title="Third" description="This is a description."></prism-step>
</prism-steps>

<div style="margin-top: 24px;">
  <prism-button (click)="prev()" [disabled]="current() === 0">Previous</prism-button>
  <prism-button (click)="next()" [disabled]="current() === 2" variant="primary" style="margin-left: 8px;">Next</prism-button>
</div>

Vertical

Steps in vertical direction.

Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
<prism-steps direction="vertical" [current]="1">
  <prism-step title="Finished" description="This is a description."></prism-step>
  <prism-step title="In Progress" description="This is a description."></prism-step>
  <prism-step title="Waiting" description="This is a description."></prism-step>
</prism-steps>

Error State

By using status='error', you can show an error state for the current step.

Finished
This is a description.
Error
This is a description.
3
Waiting
This is a description.
<prism-steps [current]="1" status="error">
  <prism-step title="Finished" description="This is a description."></prism-step>
  <prism-step title="Error" description="This is a description."></prism-step>
  <prism-step title="Waiting" description="This is a description."></prism-step>
</prism-steps>

Theming

Toggle between light and dark themes to see how the component adapts.

Light Mode
Active
Currently active step.
2
Waiting
Next step.
<div [attr.data-theme]="isDarkMode() ? 'dark' : 'light'">
  <prism-steps [current]="1">
    <prism-step title="Active" description="Currently active step."></prism-step>
    <prism-step title="Waiting" description="Next step."></prism-step>
  </prism-steps>
</div>

PrismSteps (Container)NameTypeDefaultDescription
currentmodel<number>0Current step index, counting from 0.
direction'horizontal' | 'vertical''horizontal'Set steps direction.
status'wait' | 'process' | 'finish' | 'error''process'Set current step status.
PrismStep (Item)NameTypeDefaultDescription
titleinput.required<string>-Title of the step.
descriptioninput<string>''Description of the step.
statusmodel<string>'wait'Status of the step. Usually managed by parent.
indexmodel<number>0Step index. Usually managed by parent.

Name	Type	Default	Description
`current`	`model<number>`	`0`	Current step index, counting from 0.
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Set steps direction.
`status`	`'wait' \| 'process' \| 'finish' \| 'error'`	`'process'`	Set current step status.

Name	Type	Default	Description
`title`	`input.required<string>`	`-`	Title of the step.
`description`	`input<string>`	`''`	Description of the step.
`status`	`model<string>`	`'wait'`	Status of the step. Usually managed by parent.
`index`	`model<number>`	`0`	Step index. Usually managed by parent.