diff --git a/en/application-dev/reference/arkui-ts/figures/arkts-capsuleProgressStyleEffect.png b/en/application-dev/reference/arkui-ts/figures/arkts-capsuleProgressStyleEffect.png new file mode 100644 index 0000000000000000000000000000000000000000..1601e0a264f3c542b92dcc5b0a832ceadc859cfd Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/arkts-capsuleProgressStyleEffect.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/arkts-ringProgressAnimation.gif b/en/application-dev/reference/arkui-ts/figures/arkts-ringProgressAnimation.gif new file mode 100644 index 0000000000000000000000000000000000000000..03f51b4f9a6256d2804484b6dc5053faf3c6cc3a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/arkts-ringProgressAnimation.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/arkts-ringProgressStyleEffect.png b/en/application-dev/reference/arkui-ts/figures/arkts-ringProgressStyleEffect.png new file mode 100644 index 0000000000000000000000000000000000000000..01e7f58520ed726b6c16706fb877988e92acf772 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/arkts-ringProgressStyleEffect.png differ 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 c620b663ecdc67b90b59176f62639662b3bbf1a8..060e00b1e3eca27a007342fe68ae309fe6e3d0b6 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 @@ -60,33 +60,51 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.
Since API version 9, this API is supported in ArkTS widgets.| -| color | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient10+](ts-basic-components-datapanel.md#lineargradient10) | Background color of the progress indicator. Since API version 10, this attribute can be set to **LinearGradient** for the **Ring** style.
Default value (API version 9): **'\#ff007dff'**
Default value (API version 10):
- Capsule: **'\#33006cde'**
- Ring: starting point: **'\#ff3b61f7'**, ending point: **'\#ff6591bf'**
- Other styles: **'\#ff007dff'**
Since API version 9, this API is supported in ArkTS widgets, except that **LinearGradient** is not supported.| +| color | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient10+](ts-basic-components-datapanel.md#lineargradient10) | Background color of the progress indicator.
Since API version 10, this attribute can be set to **LinearGradient** for the **Ring** style.
Default value (API version 9): **'\#ff007dff'**
Default value (API version 10):
- Capsule: **'\#33006cde'**
- Ring: starting point: **'\#ff3b61f7'**, ending point: **'\#ff6591bf'**
- Other styles: **'\#ff007dff'**
Since API version 9, this API is supported in ArkTS widgets, except that **LinearGradient** is not supported.| | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.
Default value (API version 9): **'\#19182431'**
Default value (API version 10):
- Capsule: **'\#33ffffff'**
- Ring: **'\#08182431'**
- Other styles: **'\#19182431'**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The settings of the universal attribute [backgroundColor](./ts-universal-attributes-background.md) applies to the progress indicator instead of the entire **\** component.| -| style8+ | [ProgressStyleOptions](#progressstyleoptions) \| [CapsuleStyleOptions10+](#capsulestyleoptions10) \| [RingStyleOptions10+](#ringstyleoptions10) | Component style. Since API version 10, this attribute can be set to **CapsuleStyleOptions** or **RingStyleOptions**.
- **CapsuleStyleOptions** is available for the **Capsule** style.
- **RingStyleOptions** is available for the **Ring** style.
- **ProgressStyleOptions** is available for other styles.
Since API version 9, this API is supported in ArkTS widgets, except that **CapsuleStyleOptions** and **RingStyleOptions** are not supported.| +| style8+ | [ProgressStyleOptions](#progressstyleoptions) \| [CapsuleStyleOptions10+](#capsulestyleoptions10) \| [RingStyleOptions10+](#ringstyleoptions10) \| [LinearStyleOptions10+](#linearstyleoptions10) \| [ScaleRingStyleOptions10+](#scaleringstyleoptions10) \| [EclipseStyleOptions10+](#eclipsestyleoptions10) | Component style.
Since API version 10, the following types are supported:
- **CapsuleStyleOptions**: capsule style.
- **RingStyleOptions**: ring style.
- **LinearStyleOptions**: linear style.
- **ScaleRingStyleOptions**: determinate ring style.
- **EclipseStyleOptions**: eclipse style.
- **ProgressStyleOptions**: basic style.
Since API version 9, this API is supported in ArkTS widgets, but only the **ProgressStyleOptions** type is available.| ## ProgressStyleOptions | Name | Type | Mandatory| Description | | ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | -| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.
Default value: **4.0Vp** | +| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.
Default value: **4.0vp** | | scaleCount | number | No | Number of divisions on the ring-style process indicator.
Default value: **120** | -| scaleWidth | [Length](ts-types.md#length) | No | Scale width of the ring-style progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0Vp**| +| scaleWidth | [Length](ts-types.md#length) | No | Scale width of the ring-style progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0vp**| ## CapsuleStyleOptions10+ | Name | Type| Mandatory| Description| | ------------- | ------- | ---- | -------- | | borderColor | [ResourceColor](ts-types.md#resourcecolor) | No| Border color.
Default value: **'\#33006cde'**| -| borderWidth | [Length](ts-types.md#length) | No| Border width. It cannot be set in percentage.
Default value: **1 Vp**| +| borderWidth | [Length](ts-types.md#length) | No| Border width. It cannot be set in percentage.
Default value: **1vp**| | content | string | No| Text content, which can be customized .| -| font | [Font](ts-types.md#font) | No| Text style.
Default value:
- Font size (cannot be set in percentage): **12Fp**
- Other attributes: following the settings of the **\** component.| +| font | [Font](ts-types.md#font) | No| Text style.
Default value:
- Font size (cannot be set in percentage): **12fp**
- Other attributes: following the settings of the **\** component.| | fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.
Default value: **'\#ff182431'**| | enableScanEffect | boolean | No| Whether to enable the scan effect.
Default value: **false**| +| showDefaultPercentage | boolean | No| Whether to show the percentage of the current progress. This attribute does not take effect when the **content** attribute is set.
Default value: **false**| ## RingStyleOptions10+ | Name | Type | Mandatory| Description | | ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | -| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage. A value greater than or equal to the radius evaluates to half of the radius.
Default value: **4Vp**| +| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage. A value greater than or equal to the radius evaluates to half of the radius.
Default value: **4.0vp**| | shadow | boolean | No | Whether to enable the shadow effect.
Default value: **false** | -| status | [ProgressStatus10+](#progressstatus10) | No| Status of the progress indicator. When this parameter is set to **LOADING**, the **value** settings do not take effect.
Default value: **ProgressStatus.PROGRESSING**| +| status | [ProgressStatus10+](#progressstatus10) | No| Status of the progress indicator. When this parameter is set to **LOADING**, the check update animation is played, and the **value** settings do not take effect. When the value changes from **LOADING** to **PROGRESSING**, the check update animation stops when it has reached the end state.
Default value: **ProgressStatus.PROGRESSING**| +| enableScanEffect | boolean | No| Whether to enable the scan effect.
Default value: **false**| + +## LinearStyleOptions10+ +| Name | Type | Mandatory| Description | +| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | +| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.
Default value: **4.0vp**| +| enableScanEffect | boolean | No| Whether to enable the scan effect.
Default value: **false**| + +## ScaleRingStyleOptions10+ +| Name | Type | Mandatory| Description | +| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | +| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.
Default value: **4.0vp** | +| scaleCount | number | No | Number of divisions on the ring-style process indicator.
Default value: **120** | +| scaleWidth | [Length](ts-types.md#length) | No | Scale width of the ring-style progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0vp**| + +## EclipseStyleOptions10+ +No parameter available. ## ProgressStatus10+ | Name | Description | @@ -99,7 +117,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the The [universal events](ts-universal-events-click.md) are supported. ## Example - +### Example 1 +This example shows the effect of the basic attributes for different types of progress indicators. ```ts // xxx.ets @Entry @@ -159,3 +178,74 @@ struct ProgressExample { ``` ![progress](figures/arkts-progress.png) + +### Example 2 +This example shows the effect of visual attributes of the ring style progress indicator. +```ts +@Entry +@Component +struct ProgressExample { + private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, + { color: Color.Orange, offset: 1.0 }]) + build() { + Column({ space: 15 }) { + Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%') + Progress({ value: 70, total: 100, type: ProgressType.Ring }) + .width(100).style({ strokeWidth: 20 }) + .color(this.gradientColor) + + Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%') + Progress({ value: 70, total: 100, type: ProgressType.Ring }) + .width(120).color(Color.Orange) + .style({ strokeWidth: 20, shadow: true }) + }.width('100%').padding({ top: 5 }) + } +} +``` +![ringProgressStyleEffect](figures/arkts-ringProgressStyleEffect.png) + +### Example 3 +This example shows the animation effect of the ring style progress indicator. +```ts +@Entry +@Component +struct ProgressExample { + private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, + { color: Color.Orange, offset: 1.0 }]) + build() { + Column({ space: 15 }) { + Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') + Progress({ value: 0, total: 100, type: ProgressType.Ring }) + .width(100).color(Color.Blue) + .style({ strokeWidth: 20, status: ProgressStatus.LOADING }) + + Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') + Progress({ value: 30, total: 100, type: ProgressType.Ring }) + .width(100).color(Color.Orange) + .style({ strokeWidth: 20, enableScanEffect: true }) + }.width('100%').padding({ top: 5 }) + } +} +``` +![ringProgressAnimation](figures/arkts-ringProgressAnimation.gif) + +### Example 4 +This example shows the effect of visual attributes of the capsule style progress indicator. +```ts +@Entry +@Component +struct ProgressExample { + + build() { + Column({ space: 15 }) { + Row({ space: 40 }) { + Progress({ value: 100, total: 100,type: ProgressType.Capsule }).width(100).height(50) + .style({borderColor: Color.Blue, borderWidth: 1, content: 'Installing...', + font: {size: 13, style: FontStyle.Normal}, fontColor: Color.Gray, + enableScanEffect: false, showDefaultPercentage: false}) + } + }.width('100%').padding({ top: 5 }) + } +} +``` +![capsuleProgressStyleEffect](figures/arkts-capsuleProgressStyleEffect.png)