Steps
A navigation component that guides users through a multi-step process. It supports horizontal and vertical layouts, clickable navigation, progress display, timeline mode, and component-level theme overrides.
Basic Usage
Set the active prop to the current step index. The index starts from 0.
Vertical Steps
Set direction="vertical" to render steps vertically.
Simple Style
Set simple to enable the simplified layout.
Dot Steps
Set progress-dot to enable dot-style steps.
Navigation Style
Set progress-dot="navigation" to display navigation-style step dots.
Step Status
Use the status prop on YhStep to override the state of a specific step.
Center Alignment
Set align-center to center-align step content.
Clickable Steps
Set clickable to allow step switching by click and listen for the change event.
Current Step: 1
Custom Spacing
Use space to control the width basis of each step. It supports numbers and CSS size strings.
Finish Status
Use finish-status to customize the state applied to completed steps.
Custom Slots
Use the icon, title, description, and time slots on YhStep to customize display content.
Use in Nuxt
YhSteps and YhStep can be used directly in Nuxt 3 after the YH-UI Nuxt module is registered.
Small Size
Set size="small" for a denser steps layout.
Responsive Layout
Set responsive to let horizontal steps switch to vertical layout below the configured breakpoint.
Progress Line
After setting show-progress, the connector line displays the progress value of the active step.
Timeline Mode
Set show-timeline to display timeline information, then provide the time prop or time slot on each step.
Disabled Step
Set disabled on YhStep to prevent it from being clicked.
Current Step: 0, Step 2 is disabled and cannot be clicked
Label Placement
Set label-placement="vertical" to stack labels and descriptions vertically.
Lazy Rendering
Set lazy on YhStep to render the default slot only after the step becomes active for the first time.
API
Props
Steps
| Prop | Description | Type | Default |
|---|---|---|---|
| active | Currently active step index. | number | 0 |
| direction | Layout direction of the steps container. | YhStepsDirection | 'horizontal' |
| align-center | Whether step content is center-aligned. | boolean | false |
| simple | Whether to use the simplified style. | boolean | false |
| progress-dot | Dot mode configuration. | boolean | YhStepsProgressDot | false |
| finish-status | Status applied to completed steps. | YhStepsStatus | 'finish' |
| process-status | Status applied to the current active step. | YhStepsStatus | 'process' |
| space | Width basis for each step. | number | string | '' |
| clickable | Whether clicking a step can trigger changes. | boolean | false |
| size | Steps size. | YhStepsSize | 'default' |
| responsive | Whether to switch to a vertical layout below the breakpoint. | boolean | false |
| responsive-breakpoint | Breakpoint used by responsive mode, in pixels. | number | 768 |
| label-placement | Placement mode of labels. | YhStepsLabelPlacement | 'horizontal' |
| show-progress | Whether to show connector progress. | boolean | false |
| show-timeline | Whether to render steps in timeline mode. | boolean | false |
| theme-overrides | Component-level theme overrides for YhSteps. | ComponentThemeVars | undefined |
Step
| Prop | Description | Type | Default |
|---|---|---|---|
| title | Step title. | string | '' |
| description | Step description text. | string | '' |
| icon | Icon class name rendered in the head area. | string | '' |
| status | Step status that overrides the parent-computed status. | YhStepsStatus | '' | '' |
| disabled | Whether the step is disabled. | boolean | false |
| time | Timeline text used in timeline mode. | string | '' |
| progress | Progress value used when show-progress is enabled. | number | 0 |
| lazy | Whether default slot content is rendered lazily after first activation. | boolean | false |
| theme-overrides | Component-level theme overrides for YhStep. | ComponentThemeVars | undefined |
Events
Steps
| Event Name | Description | Type |
|---|---|---|
| change | Triggered when a clickable step is selected. | (index: number) => void |
Step
Current component does not expose component events.
Slots
Steps
| Slot Name | Description | Parameters |
|---|---|---|
| default | Step content. Usually contains YhStep nodes. | - |
Step
| Slot Name | Description | Parameters |
|---|---|---|
| icon | Custom icon area content. | - |
| title | Custom title content. | - |
| description | Custom description content. | - |
| default | Additional custom content rendered below the description. | - |
| time | Custom timeline time content when timeline mode is enabled. | - |
Expose
YhSteps and YhStep do not expose public instance methods or properties.
Theme Variables
YhSteps and YhStep support themeOverrides. The steps runtime consumes the following component variables:
| Variable | Description | Default |
|---|---|---|
--yh-steps-icon-size | Size of the icon circle area. | 28px |
--yh-steps-line-color | Connector line color. | var(--yh-border-color-light) |
--yh-steps-finish-color | Completed step color. | var(--yh-color-primary) |
--yh-steps-process-color | Current active step color. | var(--yh-color-primary) |
--yh-steps-wait-color | Waiting step color. | var(--yh-text-color-placeholder) |
--yh-steps-error-color | Error step color. | var(--yh-color-danger) |
--yh-steps-success-color | Success step color. | var(--yh-color-success) |
Type Exports
| Name | Description |
|---|---|
YhStepsProps | Steps component props type |
YhStepsEmits | Steps component emits type |
YhStepsSlots | Steps component slots type |
YhStepsDirection | Direction union |
YhStepsStatus | Status union |
YhStepsProgressDot | Dot mode type |
YhStepsSize | Size union |
YhStepsLabelPlacement | Label placement union |
YhStepConfig | Step config type |
YhStepProps | Step component props type |
YhStepSlots | Step component slots type |
YhStepsInstance | Steps component instance type |
YhStepInstance | Step component instance type |