diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md index 20fe327374..497db063a2 100644 --- a/components/progress/demo/circle-dynamic.md +++ b/components/progress/demo/circle-dynamic.md @@ -1,10 +1,18 @@ --- order: 4 -title: 进度圈动态展示 +title: + zh-CN: 进度圈动态展示 + en-US: Dynamic circular progress bar --- +## zh-CN + 会动的进度条才是好进度条。 +## en-US + +A dynamic progress bar is better. + ````jsx import { Progress, Button } from 'antd'; const ButtonGroup = Button.Group; diff --git a/components/progress/demo/circle-mini.md b/components/progress/demo/circle-mini.md index f1e3f56466..7350fd7346 100644 --- a/components/progress/demo/circle-mini.md +++ b/components/progress/demo/circle-mini.md @@ -1,10 +1,18 @@ --- order: 3 -title: 小型进度圈 +title: + zh-CN: 小型进度圈 + en-US: Mini size circular progress bar --- +## zh-CN + 小一号的圈形进度。 +## en-US + +A smaller circular progress bar. + ````jsx import { Progress } from 'antd'; diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md index 6a8c4da341..7df3b88053 100644 --- a/components/progress/demo/circle.md +++ b/components/progress/demo/circle.md @@ -1,10 +1,18 @@ --- order: 1 -title: 进度圈 +title: + zh-CN: 进度圈 + en-US: Circular progress bar --- +## zh-CN + 圈形的进度。 +## en-US + +A circular progress bar. + ````jsx import { Progress } from 'antd'; diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md index 92af8aa370..5aa3996d73 100644 --- a/components/progress/demo/dynamic.md +++ b/components/progress/demo/dynamic.md @@ -1,10 +1,18 @@ --- order: 4 -title: 动态展示 +title: + zh-CN: 动态展示 + en-US: Dynamic --- +## zh-CN + 会动的进度条才是好进度条。 +## en-US + +A dynamic progress bar is better. + ````jsx import { Progress, Button } from 'antd'; const ButtonGroup = Button.Group; diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md index ae75b35fc3..48d2e44147 100644 --- a/components/progress/demo/format.md +++ b/components/progress/demo/format.md @@ -1,10 +1,18 @@ --- order: 6 -title: 自定义文字格式 +title: + zh-CN: 自定义文字格式 + en-US: Custom text format --- +## zh-CN + `format` 属性指定格式。 +## en-US + +You can custom text format by setting `format`. + ````jsx import { Progress } from 'antd'; diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md index 0baf9bed3f..3f929a71a1 100644 --- a/components/progress/demo/line-mini.md +++ b/components/progress/demo/line-mini.md @@ -1,10 +1,18 @@ --- order: 2 -title: 小型进度条 +title: + zh-CN: 小型进度条 + en-US: Mini size progress bar --- +## zh-CN + 适合放在较狭窄的区域内。 +## en-US + +Appropriate for a narrow area. + ````jsx import { Progress } from 'antd'; diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md index 9ff6dcc487..1a64468433 100644 --- a/components/progress/demo/line.md +++ b/components/progress/demo/line.md @@ -1,10 +1,18 @@ --- order: 0 -title: 进度条 +title: + zh-CN: 进度条 + en-US: Progress bar --- +## zh-CN + 标准的进度条。 +## en-US + +A standard progress bar. + ````jsx import { Progress } from 'antd'; diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md new file mode 100644 index 0000000000..50d111b27d --- /dev/null +++ b/components/progress/index.en-US.md @@ -0,0 +1,28 @@ +--- +category: Components +type: Views +title: Progress +--- + +To display the current progress of an operation flow. + +## When to use + +If it will take a long time to complete the 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 + +Property | Description | Type | Default +-----|-----|-----|------ +type | to set the type, options: `line` `circle` | String | line +percent | to set the completion percentage | Number | 0 +format | template function of the content | function(percent) | `percent => percent + '%'` +status | to set the status of the progress, options: `success` `exception` `active` | String | - +showInfo | determine whether to display the progress value and the status icon | Boolean | true +strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | Number | 10 +strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | Number | 6 +width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | Number | 132 + diff --git a/components/progress/index.md b/components/progress/index.zh-CN.md similarity index 64% rename from components/progress/index.md rename to components/progress/index.zh-CN.md index 3a8803d565..18d78f93fa 100644 --- a/components/progress/index.md +++ b/components/progress/index.zh-CN.md @@ -11,19 +11,19 @@ english: Progress 在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。 -* 当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过2秒时; -* 当需要显示一个操作完成的百分比时。 +- 当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过2秒时; +- 当需要显示一个操作完成的百分比时。 ## API | 属性 | 说明 | 类型 | 默认值 | |----------|---------------|----------|---------------| -| type | 类型,可选 `line` `circle` | string | `line` | -| percent | 百分比 | number | 0 | +| type | 类型,可选 `line` `circle` | String | line | +| percent | 百分比 | Number | 0 | | format | 内容的模板函数 | function(percent) | `percent => percent + '%'` | -| status | 状态,可选:`success` `exception` `active` | string | - | -| showInfo | 是否显示进度数值或状态图标 | bool | true | -| strokeWidth `(type=line)` | 进度条线的宽度,单位 px | number | 10 | -| strokeWidth `(type=circle)` | 圆形进度条线的宽度,单位是进度条画布宽度的百分比 | number | 6 | -| width `(type=circle)` | 圆形进度条画布宽度,单位 px | number | 132 | +| status | 状态,可选:`success` `exception` `active` | String | - | +| showInfo | 是否显示进度数值或状态图标 | Boolean | true | +| strokeWidth `(type=line)` | 进度条线的宽度,单位 px | Number | 10 | +| strokeWidth `(type=circle)` | 圆形进度条线的宽度,单位是进度条画布宽度的百分比 | Number | 6 | +| width `(type=circle)` | 圆形进度条画布宽度,单位 px | Number | 132 |