test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-06 05:59:46 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity
9be58078d2
ant-design-vue/components/progress/index.en-US.md
Cherry7 7db4265616
feat(Progress): enhance size prop and add variants (#6409) 
* refactor(progress): Progress size and add variants

* feat(progress): add `getsize`

* refactor(progress): Progress size and add variants

* chore(progress): update props type

* chore(progress): update props type

* feat(progress): update demo

* feat(progress): update docs

* test(progress): update test snap

* fix(Circle): Merging classes

* test(progress): update test snap

* feat(progress): add size demo

* test(progress): add size snapshot

* chore(Progress): reback Circle svg class change
2023-04-06 15:11:58 +08:00

2.8 KiB
Raw Blame History

category type title cover coverDark
Components Feedback Progress https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original

Display the current progress of an operation flow.

When To Use

If it will take a long time to complete an operation, you can use Progress to show the current progress and status.

  • When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
  • When you need to display the completion percentage of an operation.

API

Properties that shared by all types.

Property Description Type Default Version
format The template function of the content function(percent, successPercent) (percent) => percent + %
percent To set the completion percentage number 0
showInfo Whether to display the progress value and the status icon boolean true
status To set the status of the Progress, options: success exception normal active(line only) string -
strokeColor The color of progress bar string -
strokeLinecap To set the style of the progress linecap round | butt | square, see stroke-linecap round -
success Configs of successfully progress bar { percent: number, strokeColor: string } -
title html dom title string - 3.0
trailColor The color of unfilled part string -
type To set the type, options: line circle dashboard string line
size Progress size number | [number, number] | "small" | "default" "default"

type="line"

Property Description Type Default Version
steps The total step count number - -
strokeColor The color of progress bar, render linear-gradient when passing an object, could accept string[] when has steps. string | string[] | { from: string; to: string; direction: string } - -

type="circle"

Property Description Type Default Version
strokeColor The color of circular progress, render linear-gradient when passing an object string | object - -
strokeWidth To set the width of the circular progress, unit: percentage of the canvas width number 6 -

type="dashboard"

Property Description Type Default
gapDegree The gap degree of half circle, 0 ~ 295 number 75
gapPosition The gap position, options: top bottom left right string bottom
strokeWidth To set the width of the dashboard progress, unit: percentage of the canvas width number 6