From 5fb8797ab24518dfd06fd21f3c84a31de0c2132c Mon Sep 17 00:00:00 2001 From: esterzhou Date: Fri, 18 Mar 2022 23:13:19 +0800 Subject: [PATCH] update doc Signed-off-by: esterzhou --- .../arkui-ts/ts-basic-components-progress.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md index cc24250298..3c47386dc3 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -1,7 +1,7 @@ # 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. | - | Ring8+ | Ring style without scale. The ring fills up as the progress increases. | - | Eclipse | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full. | - | ScaleRing8+ | Ring style with scale, which is similar to the clock scale style. | - | Capsule8+ | Capsule style. 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. | + | Linear | Linear type. | + | Ring8+ | 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. | + | ScaleRing8+ | Ring type with scale, which is similar to the clock scale style. | + | Capsule8+ | 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 Value | Description | +| Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| value | number | - | Current progress. | -| color | Color | - | Background color of the progress bar. | -| style8+ | {
strokeWidth? : Length,
scaleCount? : number,
scaleWidth? : Length
} | - | Component style.
- **strokeWidth**: width of the progress bar.
- **scaleCount**: scale count of the circular progress bar.
- **scaleWidth**: scale width of the circular progress bar.
If the scale thickness is greater than the progress bar width, the default scale thickness is used. | +| value | number | - | Current progress. | +| color | Color | - | Background color of the progress bar. | +| style8+ | {
strokeWidth? : Length,
scaleCount? : number,
scaleWidth? : Length
} | - | Component style.
- **strokeWidth**: width of the progress bar.
- **scaleCount**: scale count of the circular progress bar.
- **scaleWidth**: scale width of the circular progress bar.
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 }) } -- GitLab