test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity
961b081939
ant-design/components/progress/index.en-US.md
orzorzorzorz 1e8d3ce40d feat: support gradient line for Progress (#15524) 
* try: init gradient line demo

* demo(Progress): update instructions

* chore: adjust default color

* test: update case and snapshots

* docs: update description for strokeColor

* docs: update for more in written

* test: correct type of Progress

* pref: support percent for strokeColor

* test: update snapshots

* test: update case

* pref: sort key for gradients

* fix: lgtm problem

* refactor: update output of sortGradient to string

* chore: make traversal more elegant
2019-03-24 17:05:24 +08:00

2.3 KiB
Raw Blame History

category type title
Components Feedback Progress

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
type to set the type, options: line circle dashboard string line
format 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 active normal string -
strokeLinecap to set the style of the progress linecap Enum{ 'round', 'square' } round
strokeColor color of progress bar string -
successPercent segmented success percent number 0

type="line"

Property Description Type Default
strokeWidth to set the width of the progress bar, unit: px number 10
strokeColor color of progress bar, render linear-gradient when passing an object string | { from: string; to: string; direction: string } -

type="circle"

Property Description Type Default
width to set the canvas width of the circular progress, unit: px number 132
strokeWidth to set the width of the circular progress, unit: percentage of the canvas width number 6

type="dashboard"

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