代码演示
如何引入
标准的进度条
通过
通过
通过
通过
如果
stroke
属性来控制进度条的填充色通过
percent
属性控制已完成的进度通过
size
属性控制进度条尺寸通过
aria-label
说明进度条具体代表含义如果
size
预设的尺寸不满足,可以通过style
传入 height 自定义进度条高度展示百分比文本
通过
showInfo
控制是否展示百分比数字,可以通过format
格式化展示文本垂直的进度条
设置
direction='vertical'
,展示垂直进度条,可以通过style
传入 width 控制进度条宽度环形进度条
将 type 设为
circle
,进度条将会展示成环状。进度条默认尺寸为 72 x 72你可以通过修改
width
来控制环形进度条的大小小号的环形进度条
小号进度条默认尺寸为 24 x 24
动态改变进度
自定义中心文字内容
你可以通过传入
如果不需要中心文本内容,你可以将
format
函数自定义中心文字,format
的入参为当前百分比如果不需要中心文本内容,你可以将
showInfo
设为 false,或者在 format
中直接返回空字符串圆角/方角边缘
通过 strokeLinecap 属性,你可以控制环形进度条边缘形状
API 参考
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
aria-label | aria-label属性,用来给当前元素加上的标签描述, 用于提升可访问性 v2.2.0 后提供 | string | |
aria-labelledby | aria-labelledby属性,表明某些元素的 id 是当前元素的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 v2.2.0 后提供 | string | |
aria-valuetext | aria-valuetext属性,用于提升可访问性 v2.2.0 后提供 | string | |
className | 样式类名 | string | |
direction | 条状进度条方向 horizontal 、vertical | string | 'horizontal' |
format | 格式化函数,入参为当前百分比,return 的结果将会直接渲染在圆形进度条中心 | (percent: number) => ReactNode | (percent) => percent + '%' |
id | id 标识 v2.2.0 后提供 | string | |
orbitStroke | 进度条轨道填充色 v1.0.0 后提供 | string | 'var(--semi-color-fill-0)' |
percent | 进度百分比 | number | |
showInfo | 环形进度条是否显示中间文本,条状进度条后右侧是否显示文本 | boolean | false |
size | 尺寸,可选default 、small (仅 type=circle 生效)、large (仅 type=line 生效) | string | 'default' |
stroke | 进度条填充色 | string | 'var(--semi-color-success)' |
strokeLinecap | 圆角round /方角square (仅在 type='circle'模式下生效) | string | 'round' |
strokeWidth | type 为line 时,该属性控制进度条高度; type 为circle 时,该属性控制进度条宽度 | number | 4 |
style | 样式 | CSSProperties | |
type | 类型,可选line 、circle | string | 'line' |
width | 环形进度条宽度 | number | size='default'时为 72,'small'为 24 |
Accessibility
ARIA
- Progress 具有
progressbar
role 来表示它是一个进度条组件。 - Progress 会自动将
aria-valuenow
设置为传递给组件的进度百分比(percent
),以确保屏幕阅读器可以获取正确的百分比数值。另外,Progress 支持传入aria-valuetext
,当你传入时,根据 W3C 规范,aria-valuetext
将优先被屏幕阅读器使用消费,而不是aria-valuenow
- Progress 支持传入
aria-label
、aria-labelledby
- 当 Progress 外部存在关于 Progress 作用的描述元素时,你可以通过 aria-labelledby 显式指定某些元素的 id 是 Progress 的标签
- 否则你应当通过 aria-label 说明 Progress 所代表的具体数值含义