ZartUI · Steps 步骤条规范预览

左右结构 · 不带描述

组件演示

提交申请

2

部门审批

3

财务审核

4

完成

规格参数

状态	属性	规格值	说明
未开始	节点	`24×24px` 圆形	背景 `#F5F7FA` · 数字 `#6B7A99`
	文字	`14px`	颜色 `#6B7A99`
	连接线	`1px`	颜色 `#E9ECF2`
进行中	节点	`24×24px` 圆形	背景 `#3388FF` · 数字 `#FFFFFF`
	文字	`14px · 500`	颜色 `#3388FF`
	连接线	`1px`	颜色 `#3388FF`
已完成	节点	`24×24px` 圆形	背景 `#F0F9FF` · 对勾 `#3388FF`
已完成	文字	`14px`	颜色 `#3388FF`

左右结构 · 带描述

组件演示

提交申请

2024-03-01 10:00

2

部门审批

等待审批人处理

3

财务审核

待财务部门处理

4

完成

流程结束

描述文字规格

状态	描述文字色	字号
未开始 / 已完成	`#6B7A99`	`12px`
进行中	`#223355`	`12px`

上下结构 · 不带描述

组件演示（圆与文字居中对齐，进度线与圆居中对齐）

提交申请

2

部门审批

3

财务审核

4

完成

上下结构 · 带描述

组件演示（圆、文字、描述均居中对齐，进度线与圆居中对齐）

提交申请 2024-03-01

2

部门审批等待审批人处理

3

财务审核待财务部门处理

4

完成流程结束

纵向步骤条 · 不带描述

组件演示（圆与进度线水平居中，文字在右侧左对齐，线与圆间距 4px）

提交申请

2

部门审批

3

财务审核

4

完成

纵向步骤条 · 带描述

组件演示（圆与进度线水平居中，名称+描述在右侧左对齐，线与圆间距 4px）

提交申请 2024-03-01 10:00

2

部门审批等待审批人处理

3

财务审核待财务部门处理

4

完成流程结束

ZartUI · Steps 步骤条 规范预览

左右结构 · 不带描述

左右结构 · 带描述

上下结构 · 不带描述

上下结构 · 带描述

纵向步骤条 · 不带描述

纵向步骤条 · 带描述

ZartUI · Steps 步骤条规范预览