mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-21 10:31:10 +08:00
3307fb8b0a
* Support round/floor/ceil for the current step calculate logic Always `round` is not really good. In my case, I really want step current to be 2 when percent is 34% with 3 steps. Signed-off-by: Đào Văn Hùng <memsenpai3@gmail.com> * Update Steps.tsx Signed-off-by: Đào Văn Hùng <memsenpai3@gmail.com> * Update docs and props * refactor(Steps): rename stepRound to rounding and update type to function * fix(Steps): update rounding prop type to specify argument type * fix(Steps): update rounding prop type to specify parameter name * docs(Progress): add rounding function description to props table * fix(Steps): update rounding prop to use custom default function and document default value * fix(Progress): update rounding prop type to specify parameter name in documentation * fix(Steps): remove extra comma in default rounding prop assignment * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: Đào Văn Hùng <memsenpai3@gmail.com> Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com>
4.9 KiB
4.9 KiB
| category | group | title | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|
| Components | Feedback | Progress | Display the current progress of the operation. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original |
|
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.
Examples
Progress bar
Circular progress bar
Mini size progress bar
Responsive circular progress bar
Mini size circular progress bar
Dynamic
Custom text format
Dashboard
Progress bar with success segment
Stroke Linecap
Custom line gradient
Progress bar with steps
Circular progress bar with steps
Progress size
Change progress value position
API
Common props ref：Common props
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 } | - | - |
| trailColor | The color of unfilled part | string | - | - |
| type | To set the type, options: line circle dashboard |
string | line |
|
| size | Progress size | number | [number | string, number] | { width: number, height: number } | "small" | "default" | "default" | 5.3.0, Object: 5.18.0 |
type="line"
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| steps | The total step count | number | - | - |
| rounding | The function to round the value | (step: number) => number | Math.round | 5.24.0 |
| 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 } | - | 4.21.0: string[] |
| percentPosition | Progress value position, passed in object, align indicates the horizontal position of the value, type indicates whether the value is inside or outside the progress bar |
{ align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
type="circle"
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| steps | The total step count.When passing an object, count refers to the number of steps, and gap refers to the distance between them.When passing number, the default value for gap is 2. |
number | { count: number, gap: number } | - | 5.16.0 |
| strokeColor | The color of circular progress, render gradient when passing an object | string | { number%: string } | - | - |
| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |
type="dashboard"
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| steps | The total step count.When passing an object, count refers to the number of steps, and gap refers to the distance between them.When passing number, the default value for gap is 2. |
number | { count: number, gap: number } | - | 5.16.0 |
| 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 |