# Steps 标签页 ## 基本用法 `active` 为步骤进度，为 number 类型，步骤的下标。 ```html ``` ## 水平居中 设置 `align-center` 水平居中，只对横向步骤条有效。 ```html ``` ## 设置标题和描述信息 可以通过 `title` 和 `description` 设置步骤的标题和描述信息。如果不设置标题，则会使用默认的文案。 ```html ``` ## 修改图标 可以通过 `icon` 属性设置步骤的图标，传入图标的名称，也可以通过 `icon` 的 slot 插槽自定义图标，使用插槽需要设置 `icon-slot` 为 `true`。 ```html ``` ## 竖向步骤条 设置 `vertical` 属性。 ```html ``` ## 点状步骤 设置 `dot` 属性。 ```html ``` ## 修改状态 设置 `status`，支持 'finished'（完成）、'process'（进行中）、'error'（失败） 三种状态。 ```html ``` ## Steps Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| | active | 步骤进度 | number | - | 0 | - | | vertical | 垂直方向 | boolean | - | false | - | | dot | 点状步骤条 | dot | - | false | - | | space | 步骤条间距，默认为自动计算 | string | - | - | - | | align-center | 是否水平居中，只对横向步骤条有效 | boolean | - | false | - | ## Step Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | |-----|------|-----|-------|-------|--------| | title | 标题，如果没有则为默认文案。当只有标题而没有描述时，标题的字号会小2号 | string | - | - | - | | title-slot | 使用 title 插槽时需要设置该属性 | boolean | - | false | - | | description | 描述 | string | - | - | - | | description-slot | 使用 description 插槽时需要设置该属性 | boolean | - | false | - | | icon | 图标 | string | - | - | - | | icon-slot | 使用 icon 插槽时需要设置该属性 | boolean | - | false | - | | status | 步骤状态 | string | finished / process / error | - | - | ## Step Slot | name | 说明 | 最低版本 | |------|-----|---------| | icon | 图标 | - | | title | 标题 | - | | description | 描述 | - | ## Steps 外部样式类 | 类名 | 说明 | 最低版本 | |-----|-----|---------| | custom-class | 根节点样式 | - | ## Step 外部样式类 | 类名 | 说明 | 最低版本 | |-----|------|--------| | custom-class | 根节点样式 | - |