Steps
A navigation bar that guides users through a process to complete tasks. Combines the best features from Element Plus, Naive UI, and Ant Design, and introduces navigation style and clickable switching functionality.
Basic Usage
A simple steps component. Set the active prop, which accepts a number representing the index of the currently active step (starting from 0).
Vertical Steps
Set direction="vertical" to display steps vertically.
Simple Style
Set simple to enable a simplified style for the steps.
Dot Steps
Set progress-dot to enable dot-style steps.
Navigation Style
Set progress-dot="navigation" to enable navigation-style steps, suitable for workflow guidance scenarios.
Step Status
Use the status prop to customize the status of each step. Supports five statuses: wait, process, finish, error, and success.
Center Alignment
Set align-center to center-align the step content.
Clickable Steps
Set clickable to allow switching steps by clicking. Needs to be used with the @change event.
Current Step: 1
Custom Spacing
Use the space prop to set the spacing between each step, supporting numbers (px) or percentage strings.
Finish Status
Use finish-status to set the status of finished steps, default is finish, optional values include success.
Custom Slots
Use icon, title, and description slots to customize step content.
Use in Nuxt
The component is fully adapted for Nuxt 3, supporting auto-import and SSR.
Small Size
Set size="small" to use a more compact small-sized steps.
Responsive Layout
When responsive is set, it automatically switches to vertical layout when the window width is below the breakpoint (default 768px).
Progress Line
After setting show-progress, the connecting line will display as a progress bar. Combined with the progress prop of Step, it can show the completion progress of the current step.
Timeline Mode
After setting show-timeline, time information can be displayed, suitable for logistics tracking, history records, etc.
Disabled Step
Set the disabled prop on Step to disable clicking on that step.
Current Step: 0, Step 2 is disabled and cannot be clicked
Label Placement
Set label-placement="vertical" to arrange labels vertically.
Lazy Rendering
Set the lazy prop on Step to lazy-render content, which will only be rendered when first activated, improving performance.
API
Steps Props
| Prop | Description | Type | Default |
|---|---|---|---|
| active | Currently active step (starting from 0) | number | 0 |
| direction | Display direction | 'horizontal' | 'vertical' | 'horizontal' |
| align-center | Whether to center align | boolean | false |
| simple | Whether to enable simple style | boolean | false |
| progress-dot | Dot/navigation style | boolean | 'dot' | 'navigation' | false |
| finish-status | Finished step status | 'wait' | 'process' | 'finish' | 'error' | 'success' | 'finish' |
| process-status | Current step status | 'wait' | 'process' | 'finish' | 'error' | 'success' | 'process' |
| space | Space between each step (supports px or percentage) | number | string | — |
| clickable | Whether steps are clickable | boolean | false |
| size | Size | 'default' | 'small' | 'default' |
| responsive | Whether responsive (auto switch to vertical on small screens) | boolean | false |
| responsive-breakpoint | Responsive breakpoint (px) | number | 768 |
| label-placement | Label placement | 'horizontal' | 'vertical' | 'horizontal' |
| show-progress | Show progress bar connecting line | boolean | false |
| show-timeline | Show timeline | boolean | false |
Steps Events
| Event Name | Description | Type |
|---|---|---|
| change | Triggered when step is clicked (requires clickable enabled) | (index: number) => void |
Steps Slots
| Slot Name | Description | Parameters |
|---|---|---|
| default | Step component content | — |
Step Props
| Prop | Description | Type | Default |
|---|---|---|---|
| title | Title | string | '' |
| description | Description text | string | '' |
| icon | Custom icon class name | string | '' |
| status | Current step status (overrides parent setting) | 'wait' | 'process' | 'finish' | 'error' | 'success' | '' |
| disabled | Whether to disable this step | boolean | false |
| time | Time information (for timeline mode) | string | '' |
| progress | Progress percentage (0-100, for progress bar mode) | number | 0 |
| lazy | Whether to lazy render content | boolean | false |
Step Slots
| Slot Name | Description | Parameters |
|---|---|---|
| default | Custom content area | — |
| icon | Custom icon | — |
| title | Custom title | — |
| description | Custom description | — |
| time | Custom time content | — |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-steps-icon-size | Icon area size | 28px |
--yh-steps-line-color | Line color | var(--yh-border-color-light) |
--yh-steps-finish-color | Finished status color | var(--yh-color-primary) |
--yh-steps-process-color | In progress status color | var(--yh-color-primary) |
--yh-steps-wait-color | Waiting status color | var(--yh-text-color-placeholder) |
--yh-steps-error-color | Error status color | var(--yh-color-danger) |
--yh-steps-success-color | Success status color | var(--yh-color-success) |