Step Progress
Baisc Usage
iStepProgress differs from progress bar components of Element Plus that the later displays only numerical progress, while iStepProgress displays step progress, such as workflow steps or task status.
You can customize the text of the step progress by using the text slot.
size controls the diameter of the outer circle of the circular progress bar, strokeWidth controls the width of the circular progress bar, and gap controls the spacing between the circular progress bars.
Rectangle Progress Bar
The default shape of iStepProgress is a circle. Yon can change it to a rectangle by setting the type attribute to 'line'. In this case, you can set the size of the progress bar by setting the height and width attributes.
Theme Color
set color attribute to change the theme color of the progress bar.
API
Attributes
| Name | is Required | Description | Type | Default Value |
|---|---|---|---|---|
| current | No | current step | Number, String, Object | 0 |
| steps | No | whole step list | Array | Number |
| type | No | shape of progress bar | String | 'circle' |
| strokeWidth | No | width of progressbar, valid only when type='circle' | Number | 20 |
| size | No | diameter of outer circle， valid only when type='circle' | Number | 100 |
| gap | No | gap of two progress bars | Number | 20 |
| stepKey | No | key name of step，valid only when steps attribute is Array of Object and current is an object | string | 'id' |
| width | No | width of progress bar, valid only when type='line' | Number | 10 |
| height | No | height of progress bar, valid only when type='line' | Number | 30 |
| color | No | theme color | string | var(--el-color-success) |
Slot
| Slot Name | Description |
|---|---|
| text | text of current step |