Steps 步骤条
引导用户按照流程完成任务的导航条
何时使用
当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务
代码示例
基本使用
属性
Steps
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|---|
| index | number | 否 | 0 | 当前步骤, 受控 |
| direction | 'horizontal' | 'vertical' | 否 | 'horizontal' | 方向 |
| uid | string | 否 | - | 当页面有多个Steps时需传入,必须页面唯一,与内部的 StepItem 组件的 uid 一致 |
| className | string | 否 | - | 类名 |
StepItem
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|---|
| index | number | 是 | - | 小程序必填,用于标记当前是第几步,必须按顺序递增 |
| title | string | slot | 是 | - | 标题 |
| desc | string | slot | 否 | - | 补充信息 |
| fail | boolean | 否 | false | 是否失败步骤 |
| icon | string | slot | 否 | - | 图标,横向和纵向都有各自的默认图标 |
| activeIcon | string | slot | 否 | - | 激活步骤图标,横向和纵向都有各自的默认图标 |
| failIcon | string | slot | 否 | - | 失败步骤图标,横向和纵向都有各自的默认图标 |
| uid | string | 否 | - | 当页面有多个Steps时需传入,必须页面唯一,与外部的 Steps 组件的 uid 一致 |
| className | string | 否 | - | 类名 |
插槽
StepItem
| 名称 | 说明 |
|---|
| title | 标题内容插槽 |
| desc | 补充内容插槽 |
| icon | 默认图标插槽 |
| activeIcon | 激活步骤图标插槽 |
| failIcon | 失败步骤图标插槽 |
样式类
Steps
| 类名 | 说明 |
|---|
| amd-steps | 整体样式 |
| amd-steps-horizontal | 整体样式 |
| amd-steps-vertical | 整体样式 |
StepItem
| 类名 | 说明 |
|---|
| amd-steps-item | 整体样式 |
| amd-steps-item-horizontal | 整体样式 |
| amd-steps-item-vertical | 整体样式 |
| amd-steps-item-line | 步骤条样式 |
| amd-steps-item-line-fail | 错误步骤条样式 |
| amd-steps-item-icon | 图标样式 |
| amd-steps-item-text | 文字区域样式 |
| amd-steps-item-title | 标题样式 |
| amd-steps-item-desc | 补充说明样式 |