Gitee
Appearance
Step 步骤条
Step 组件用展现多步骤操作界面。
基本用法
基本竖向步骤条
横向平分步骤条
竖向平分步骤条
切换上一步或下一步
设置点击
设置图标
设置class
设置status
类型
typescript
type StepDirectionType = 'horizontal' | 'vertical'
type StepStatus = 'active' | 'finish' | ''
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| direction | string as StepDirectionType | 'horizontal' | 步骤条方向 |
| fill | boolean | false | 每个步骤是否平分步骤条整体宽度或高度 |
| height | number | 0 | 竖向步骤条，fill 时需要传递的高度 |
| clickable | boolean | true | 是否支持点击 |
| activeIndex | number | 0 | 当前 active 步骤的索引 |
| steps | Array<Step> | [{ id: '1',title: '审批中（示例）',description: '正在审批'},{id: '2', title: '复核中（示例）',description: '等待复核'}] | 步骤条的具体参数 |
Step属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| id | string | 必有属性，标识 |
| title | string | 必有属性，步骤标题 |
| class | string | 为当前步骤指定的样式 |
| description | string | 当前步骤的描述 |
| disable | boolean | 当前步骤是否禁用 |
| icon | string | 为当前步骤指定图标 |
| status | StepStatus | 当前步骤的进度状况 |
事件
| 事件名 | 类型 | 说明 |
|---|---|---|
| click | EventEmitter<any> | 点击步骤条事件 |