mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-30 22:39:34 +08:00
Code Issues Actions 34 Packages Projects Releases Wiki Activity
f7609a04a7
ant-design/components/progress/index.zh-CN.md
LonelySnowman 5098e6e209
feat: progress add inside and bottom text position (#48157) 
* feat: progress add inside and bottom text position

* feat: change progress percent position api

* fix: change to follow coding standards

* docs: reset i18n zh file

* fix: change to follow coding standards

* fix: change to follow coding standards

* docs: reset i18n file

* fix: change to follow coding standards

* docs: reset i18n file

* feat: progress inner text get brighten color

* feat: update progress snapshots

* fix: progress bottom layout center

* feat: update steps snapshots

* feat: update progress snapshots

* feat: update config provider snapshots

* feat: progress inner text add negate color

* feat: update progress snapshots

* feat: progress inner text add light bg color

* feat: progress inner text add light bg color

* feat: change progress percentPosition api

* feat: change progress component test

* feat: update progress line component snapshot

* feat: progress component outer start layout text adapt

* feat: progress line change to flex layout

* feat: update progress snapshots

* feat: update progress line style

* feat: update progress line style

* fix: progress line reset height use inline block

* fix: change progress is line type

* fix: change progress is line type

* fix: delete progress outer styles

* fix: change progress line type layout

* fix: progress add outer style

* feat: update progress snapshots

* fix: change progress text bright color

* fix: optimized code volume

* fix: progress delete after style on inner layout

* fix: update progress test file

---------

Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
2024-05-10 10:22:32 +08:00

4.4 KiB
Raw Blame History

category group title subtitle description cover coverDark demo
Components 反馈 Progress 进度条 展示操作的当前进度。 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original
cols
2

何时使用

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

  • 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；
  • 当需要显示一个操作完成的百分比时。

代码演示

进度条 进度圈 小型进度条 响应式进度圈 小型进度圈 动态展示 自定义文字格式 仪表盘 分段进度条 边缘形状 自定义进度条渐变色 步骤进度条 步骤进度圈 尺寸 改变进度数值位置

API

通用属性参考：通用属性

各类型共用的属性。

属性 说明 类型 默认值 版本
format 内容的模板函数 function(percent, successPercent) (percent) => percent + % -
percent 百分比 number 0 -
showInfo 是否显示进度数值或状态图标 boolean true -
status 状态，可选：success exception normal active(仅限 line) string - -
strokeColor 进度条的色彩 string - -
strokeLinecap 进度条的样式 round | butt | square，区别详见 stroke-linecap round -
success 成功进度条相关配置 { percent: number, strokeColor: string } - -
trailColor 未完成的分段的颜色 string - -
type 类型，可选 line circle dashboard string line -
size 进度条的尺寸 number | [number | string, number] | { width: number, height: number } | "small" | "default" "default" 5.3.0, Object: 5.18.0

type="line"

属性 说明 类型 默认值 版本
steps 进度条总共步数 number - -
strokeColor 进度条的色彩，传入 object 时为渐变。当有 steps 时支持传入一个数组。 string | string[] | { from: string; to: string; direction: string } - 4.21.0: string[]
percentPosition 进度数值位置，传入对象，align 表示数值的水平位置，type 表示数值在进度条内部还是外部 { align: string; type: string } { align: "end", type: "outer" } 5.18.0

type="circle"

属性 说明 类型 默认值 版本
steps 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 number | { count: number, gap: number } - 5.16.0
strokeColor 圆形进度条线的色彩，传入 object 时为渐变 string | { number%: string } - -
strokeWidth 圆形进度条线的宽度，单位是进度条画布宽度的百分比 number 6 -

type="dashboard"

属性 说明 类型 默认值 版本
steps 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 number | { count: number, gap: number } - 5.16.0
gapDegree 仪表盘进度条缺口角度，可取值 0 ~ 295 number 75 -
gapPosition 仪表盘进度条缺口位置 top | bottom | left | right bottom -
strokeWidth 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 number 6 -

主题变量（Design Token）