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

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

Merge pull request !2187 from ester.zhou/TR-1730
# Progress # 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. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -20,35 +20,35 @@ None ...@@ -20,35 +20,35 @@ None
## APIs ## APIs
Progress(value: {value: number, total?: number, style?: ProgressStyle}) Progress(value: { value: number, total?: number, type?: ProgressType})
Creates a progress bar. Creates a progress bar.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Current progress. | | value | number | Yes | - | Current progress. |
| total | number | No | 100 | Total progress. | | total | number | No | 100 | Total progress. |
| style | ProgressStyle | No | ProgressStyle.Linear | Style of the progress bar. | | type | ProgressType | No | ProgressType.Linear | Type of the progress bar. |
- ProgressStyle enums - ProgressType enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Linear | Linear style. | | Linear | Linear type. |
| 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. | | Ring<sup>8+</sup> | Ring type without scale. The ring fills up as the progress 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. | | Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to 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. | | ScaleRing<sup>8+</sup> | Ring type with scale, which is similar to the clock scale 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. | | 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 ## Attributes
| Name | Type | Default&nbsp;Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| value | number | - | Current&nbsp;progress. | | value | number | - | Current progress. |
| color | Color | - | Background&nbsp;color&nbsp;of&nbsp;the&nbsp;progress&nbsp;bar. | | color | Color | - | Background color of the progress 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. | | 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 ## Example
...@@ -61,35 +61,35 @@ struct ProgressExample { ...@@ -61,35 +61,35 @@ struct ProgressExample {
build() { build() {
Column({ space: 15 }) { Column({ space: 15 }) {
Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Progress({ value: 10, style: ProgressStyle.Linear }).width(200) Progress({ value: 10, type: ProgressType.Linear }).width(200)
Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Grey).value(50).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%') Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) { Row({ space: 40 }) {
Progress({ value: 10, style: ProgressStyle.Eclipse }).width(100) Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
Progress({ value: 20, total: 150, style: ProgressStyle.Eclipse }).color(Color.Grey).value(50).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%') Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) { Row({ space: 40 }) {
Progress({ value: 10, style: ProgressStyle.ScaleRing }).width(100) Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)
Progress({ value: 20, total: 150, style: ProgressStyle.ScaleRing }) Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
.color(Color.Grey).value(50).width(100) .color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
} }
Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) { Row({ space: 40 }) {
Progress({ value: 10, style: ProgressStyle.Ring }).width(100) Progress({ value: 10, type: ProgressType.Ring }).width(100)
Progress({ value: 20, total: 150, style: ProgressStyle.Ring }) Progress({ value: 20, total: 150, type: ProgressType.Ring })
.color(Color.Grey).value(50).width(100) .color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 }) .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 })
} }
Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) { Row({ space: 40 }) {
Progress({ value: 10, style: ProgressStyle.Capsule }).width(100) Progress({ value: 10, type: ProgressType.Capsule }).width(100)
Progress({ value: 20, total: 150, style: ProgressStyle.Capsule }).color(Color.Grey).value(50).width(100) Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100)
} }
}.width('100%').margin({ top: 30 }) }.width('100%').margin({ top: 30 })
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册