Steps
Used to guide users through completing tasks in a process, or to show users the current step status.
Tip
wd-step now directly supports title, icon, and description slots. No need to set the old *-slot control fields.
Component Types
Basic Usage
active is the current step progress, corresponding to the step index.
html
<wd-steps :active="0">
<wd-step />
<wd-step />
<wd-step />
</wd-steps>Title and Description
Set the title and description for each step via title and description.
html
<wd-steps :active="active" align-center>
<wd-step title="Step 1" description="Register an account" />
<wd-step title="Step 2" description="Log in and bind phone" />
<wd-step title="Step 3" description="Complete personal information" />
</wd-steps>
<wd-button size="small" @click="nextStep">Next Step</wd-button>ts
const active = ref(0)
function nextStep() {
active.value += 1
}Custom Icon
Set the step icon via icon.
html
<wd-steps :active="1" align-center>
<wd-step icon="settings" />
<wd-step icon="list" />
<wd-step icon="clock-circle" />
</wd-steps>Component States
Modify Status
Set the status of a specific step via status.
html
<wd-steps :active="1" align-center>
<wd-step title="Bind Phone" />
<wd-step title="Rebind Phone" status="error" />
<wd-step title="Step 3" />
</wd-steps>Component Styles
Horizontal Center
Setting align-center centers horizontally. Only effective for horizontal step bars.
html
<wd-steps :active="0" align-center>
<wd-step />
<wd-step />
<wd-step />
</wd-steps>Layout Capabilities
Vertical Steps
Setting vertical displays in vertical direction.
html
<wd-steps :active="1" vertical>
<wd-step description="Register an account" />
<wd-step description="Log in and bind phone" />
<wd-step description="Complete personal information" />
</wd-steps>Special Styles
Dot Steps
Setting dot uses dot-style steps.
html
<wd-steps :active="1" align-center dot>
<wd-step title="Step 1" description="Register an account" />
<wd-step title="Step 2" description="Log in and bind phone" />
<wd-step title="Step 3" description="Complete personal information" />
</wd-steps>Controllable Dot Steps
Dot-style steps support controlling the current step via external active.
html
<wd-steps :active="dotActive" align-center dot>
<wd-step title="Step 1" description="Register an account" />
<wd-step title="Step 2" description="Log in and bind phone" />
<wd-step title="Step 3" description="Complete personal information" />
</wd-steps>Vertical Dot Steps
vertical and dot can be combined.
html
<wd-steps :active="1" vertical dot>
<wd-step description="Register an account" />
<wd-step description="Log in and bind phone" />
<wd-step description="Complete personal information" />
</wd-steps>Steps Attributes
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| active | Current active step index | number | 0 |
| vertical | Whether to display vertically | boolean | false |
| dot | Whether to use dot-style steps | boolean | false |
| space | Step bar spacing, automatically calculated by default | string | '' |
| align-center | Whether to center horizontally, only effective for horizontal step bars | boolean | false |
| custom-class | Root node custom class name | string | '' |
| custom-style | Root node custom style | string | '' |
Step Attributes
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| title | Step title, displays default text when not passed | string | - |
| description | Step description | string | - |
| icon | Step icon | string | - |
| status | Step status, optional values are finished, process, error, wait | StepStatus | - |
| custom-class | Root node custom class name | string | '' |
| custom-style | Root node custom style | string | '' |
Steps Slots
| name | Description |
|---|---|
| default | Step list |
Step Slots
| name | Description |
|---|---|
| icon | Custom step icon |
| title | Custom step title |
| description | Custom step description |
主题定制
CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --wot-step-content-margin-top | $spacing-super-tight | 内容区距头部的顶部外边距 |
| --wot-step-vertical-content-margin-left | $n-32 | 垂直布局时内容区的左外边距 |
| --wot-step-vertical-content-padding-bottom | $n-20 | 垂直布局时内容区的底部内边距 |
| --wot-step-vertical-header-dot-top | $n-6 | 垂直布局且为点状指示器时，头部的顶部绝对定位距离 |
| --wot-step-indicator-size | $n-18 | 圆形指示器的宽高尺寸 |
| --wot-step-circle-border-radius | $radius-radius-full | 圆形指示器的圆角大小 |
| --wot-step-circle-bg | $filled-strong | 等待 (wait) 状态下圆形指示器的背景色 |
| --wot-step-process-bg | $primary-6 | 进行中 (process) 状态下圆形指示器的背景色 |
| --wot-step-finished-bg | $primary-1 | 已完成 (finished) 状态下圆形指示器的背景色 |
| --wot-step-error-bg | $danger-main | 错误 (error) 状态下圆形指示器的背景色 |
| --wot-step-circle-text-font-size | $typography-label-size-main | 圆形指示器内部文本的字号 |
| --wot-step-circle-text-line-height | $typography-label-line--height-size-main | 圆形指示器内部文本的行高 |
| --wot-step-circle-text-font-weight | $font-weight-medium | 圆形指示器内部文本的字重 |
| --wot-step-circle-text-color | $text-secondary | 等待状态或默认状态下圆形指示器内文本颜色 |
| --wot-step-circle-text-process-color | $text-white | 进行中状态下圆形指示器内文本颜色 |
| --wot-step-circle-text-finished-color | $primary-6 | 已完成状态下圆形指示器内文本颜色 |
| --wot-step-circle-icon-size | $n-12 | 圆形指示器内置状态图标 (如完成时的对号或错误时的叉号) 的字号大小 |
| --wot-step-icon-size | $n-18 | 外部自定义传入的图标 (通过 icon 属性) 的字号大小 |
| --wot-step-icon-color | $icon-auxiliary | 等待或默认状态下图标的颜色 |
| --wot-step-icon-color-active | $primary-6 | 激活 (如 process 或 finished) 状态下图标的颜色 |
| --wot-step-icon-error-color | $danger-main | 错误 (error) 状态下图标的颜色 |
| --wot-step-inactive-color | $text-placeholder | 未激活部分的占位文本颜色 |
| --wot-step-error-color | $text-white | 错误状态整体的主色调（纯白文本场景下等使用） |
| --wot-step-line-spacing | $spacing-tight | 连接线与两侧指示器之间的间距 |
| --wot-step-line-color | $border-main | 连接线的默认底色 (对应未激活的线段) |
| --wot-step-line-active-color | $primary-6 | 激活 (完成状态) 下连接线的颜色 |
| --wot-step-dot-size | $n-10 | 点状指示器的宽高尺寸 |
| --wot-step-dot-wait-bg | $filled-strong | 等待 (wait) 状态下点状指示器的背景色 |
| --wot-step-dot-process-bg | $primary-6 | 进行中 (process) 状态下点状指示器的背景色 |
| --wot-step-dot-process-border-color | $primary-3 | 进行中 (process) 状态下点状指示器的描边颜色 |
| --wot-step-dot-finished-bg | $primary-3 | 已完成 (finished) 状态下点状指示器的背景色 |
| --wot-step-dot-finished-border-color | $primary-6 | 已完成 (finished) 状态下点状指示器的描边颜色 |
| --wot-step-dot-error-bg | $danger-main | 错误 (error) 状态下点状指示器的背景色 |
| --wot-step-title-font-size | $typography-body-size-main | 标题文本字号大小 |
| --wot-step-title-line-height | $typography-body-line--height-size-main | 标题文本行高 |
| --wot-step-title-font-weight | $font-weight-regular | 标题文本字重 |
| --wot-step-title-color | $text-secondary | 等待与完成状态下标题的颜色 |
| --wot-step-title-color-active | $primary-6 | 进行中状态下标题的激活颜色 |
| --wot-step-title-error-color | $danger-main | 错误状态下标题的颜色 |
| --wot-step-description-font-size | $typography-label-size-main | 描述文本字号大小 |
| --wot-step-description-line-height | $typography-label-line--height-size-main | 描述文本行高 |
| --wot-step-description-font-weight | $font-weight-regular | 描述文本字重 |
| --wot-step-description-color | $text-secondary | 描述文本颜色 |
| --wot-step-description-margin-top | $spacing-super-tight | 描述文本距标题的距离 |
| --wot-step-description-padding | $padding-zero $padding-ultra-tight | 描述文本的内边距 |