未验证 提交 8f7ca720 编写于 作者: O openharmony_ci 提交者: Gitee

!2187 1730 处理完成:ts-basic-components-progress.md 刷新

Merge pull request !2187 from ester.zhou/TR-1730
# Progress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -20,40 +20,40 @@ None
## APIs
Progress(value: {value: number, total?: number, style?: ProgressStyle})
Progress(value: { value: number, total?: number, type?: ProgressType})
Creates a progress bar.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Current progress. |
| total | number | No | 100 | Total progress. |
| style | ProgressStyle | No | ProgressStyle.Linear | Style of the progress bar. |
| value | number | Yes | - | Current progress. |
| total | number | No | 100 | Total progress. |
| type | ProgressType | No | ProgressType.Linear | Type of the progress bar. |
- ProgressStyle enums
| Name | Description |
- ProgressType enums
| Name | Description |
| -------- | -------- |
| Linear | Linear style. |
| Ring<sup>8+</sup> | Ring&nbsp;style&nbsp;without&nbsp;scale.&nbsp;The&nbsp;ring&nbsp;fills&nbsp;up&nbsp;as&nbsp;the&nbsp;progress&nbsp;increases. |
| Eclipse | Eclipse&nbsp;style,&nbsp;which&nbsp;visualizes&nbsp;the&nbsp;progress&nbsp;in&nbsp;a&nbsp;way&nbsp;similar&nbsp;to&nbsp;the&nbsp;moon&nbsp;waxing&nbsp;from&nbsp;new&nbsp;to&nbsp;full. |
| ScaleRing<sup>8+</sup> | Ring&nbsp;style&nbsp;with&nbsp;scale,&nbsp;which&nbsp;is&nbsp;similar&nbsp;to&nbsp;the&nbsp;clock&nbsp;scale&nbsp;style. |
| Capsule<sup>8+</sup> | Capsule&nbsp;style.&nbsp;At&nbsp;both&nbsp;ends,&nbsp;the&nbsp;progress&nbsp;bar&nbsp;changes&nbsp;from&nbsp;an&nbsp;arc&nbsp;to&nbsp;a&nbsp;straight&nbsp;line&nbsp;and&nbsp;from&nbsp;a&nbsp;straight&nbsp;line&nbsp;to&nbsp;an&nbsp;arc.&nbsp;In&nbsp;the&nbsp;middle&nbsp;part&nbsp;of&nbsp;the&nbsp;capsule,&nbsp;the&nbsp;progress&nbsp;bar&nbsp;moves&nbsp;to&nbsp;the&nbsp;right. |
| Linear | Linear type. |
| Ring<sup>8+</sup> | Ring type without scale. The ring fills up as the progress increases. |
| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full. |
| ScaleRing<sup>8+</sup> | Ring type with scale, which is similar to the clock scale style. |
| Capsule<sup>8+</sup> | Capsule type. At both ends, the progress bar changes from an arc to a straight line and from a straight line to an arc. In the middle part of the capsule, the progress bar moves to the right. |
## Attributes
| Name | Type | Default&nbsp;Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| value | number | - | Current&nbsp;progress. |
| color | Color | - | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;progress&nbsp;bar. |
| style8+ | {<br/>strokeWidth?&nbsp;:&nbsp;Length,<br/>scaleCount?&nbsp;:&nbsp;number,<br/>scaleWidth?&nbsp;:&nbsp;Length<br/>} | - | Component&nbsp;style.<br/>-&nbsp;**strokeWidth**:&nbsp;width&nbsp;of&nbsp;the&nbsp;progress&nbsp;bar.<br/>-&nbsp;**scaleCount**:&nbsp;scale&nbsp;count&nbsp;of&nbsp;the&nbsp;circular&nbsp;progress&nbsp;bar.<br/>-&nbsp;**scaleWidth**:&nbsp;scale&nbsp;width&nbsp;of&nbsp;the&nbsp;circular&nbsp;progress&nbsp;bar.<br/>If&nbsp;the&nbsp;scale&nbsp;thickness&nbsp;is&nbsp;greater&nbsp;than&nbsp;the&nbsp;progress&nbsp;bar&nbsp;width,&nbsp;the&nbsp;default&nbsp;scale&nbsp;thickness&nbsp;is&nbsp;used. |
| value | number | - | Current progress. |
| color | Color | - | Background color of the progress bar. |
| style<sup>8+</sup> | {<br/>strokeWidth? : Length,<br/>scaleCount? : number,<br/>scaleWidth? : Length<br/>} | - | Component style.<br/>- **strokeWidth**: width of the progress bar.<br/>- **scaleCount**: scale count of the circular progress bar.<br/>- **scaleWidth**: scale width of the circular progress bar.<br/>If the scale thickness is greater than the progress bar width, the default scale thickness is used. |
## Example
```
@Entry
@Component
......@@ -61,35 +61,35 @@ struct ProgressExample {
build() {
Column({ space: 15 }) {
Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Progress({ value: 10, style: ProgressStyle.Linear }).width(200)
Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Grey).value(50).width(200)
Progress({ value: 10, type: ProgressType.Linear }).width(200)
Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)
Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, style: ProgressStyle.Eclipse }).width(100)
Progress({ value: 20, total: 150, style: ProgressStyle.Eclipse }).color(Color.Grey).value(50).width(100)
Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100)
}
Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, style: ProgressStyle.ScaleRing }).width(100)
Progress({ value: 20, total: 150, style: ProgressStyle.ScaleRing })
Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
.color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
}
Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, style: ProgressStyle.Ring }).width(100)
Progress({ value: 20, total: 150, style: ProgressStyle.Ring })
Progress({ value: 10, type: ProgressType.Ring }).width(100)
Progress({ value: 20, total: 150, type: ProgressType.Ring })
.color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 })
}
Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, style: ProgressStyle.Capsule }).width(100)
Progress({ value: 20, total: 150, style: ProgressStyle.Capsule }).color(Color.Grey).value(50).width(100)
Progress({ value: 10, type: ProgressType.Capsule }).width(100)
Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100)
}
}.width('100%').margin({ top: 30 })
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册