1# ProgressButtonV2 2 3 4The **ProgressButtonV2** component is a download button with a progress indicator that shows the download progress. 5 6This component is implemented based on [state management V2](../../../quick-start/arkts-state-management-overview.md#state-management-v2). Compared with [state management V1](../../../quick-start/arkts-state-management-overview.md#state-management-v1), V2 offers a higher level of observation and management over data objects beyond the component level. You can now more easily manage download button data and states with greater flexibility, leading to faster UI updates. 7 8 9> **NOTE** 10> 11> - This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 12 13 14## Modules to Import 15 16``` 17import { ColorMetrics, LengthMetrics, ProgressButtonV2, ProgressButtonV2Color } from '@kit.ArkUI' 18``` 19 20## ProgressButtonV2 21 22ProgressButtonV2({progress: number, content: ResourceStr, progressButtonWidth?: LengthMetrics, onClicked: ClickCallback, 23isEnabled: boolean, colorOptions?: ProgressButtonColorOptions, progressButtonRadius?: LengthMetrics}) 24 25The **ProgressButton** component is a download button with a progress indicator that shows the download progress. 26 27**Decorator**: \@ComponentV2 28 29**Atomic service API**: This API can be used in atomic services since API version 18. 30 31**System capability**: SystemCapability.ArkUI.ArkUI.Full 32 33| Name | Type | Mandatory| Decorator | Description | 34|-----------------------------------|---------------------------------------------------------------|----|------------------------|------------------------------------------------------------------------------------| 35| progress | number | Yes | \@Require <br>\@Param | Current download progress.<br>The value ranges from 0 to 100. Values less than 0 are adjusted to **0**, and values greater than 100 are capped at **100**.<br>Default value: **0** | 36| content | [ResourceStr](ts-types.md#resourcestr) | Yes | \@Require <br>\@Param | Button text. | 37| progressButtonWidth | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | \@Param <br>\@Once | Width of the button.<br>Default value: **44vp** | 38| onClicked | [ClickCallback](#clickcallback) | Yes | \@Param | Callback invoked when the button is clicked.<br/>Default value: () => {} | 39| isEnabled | boolean | Yes | \@Param | Whether the button can be clicked.<br> **true**: The button can be clicked.<br> **false**: The button cannot be clicked. <br/>Default value: true| 40| colorOptions | [ProgressButtonV2Color](#progressbuttonv2color) | No | \@Param | Color options for the button.<br>Default value: **undefined** | 41| progressButtonRadius<sup>18+<sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | \@Param | Corner radius of the button. It cannot be set in percentage.<br>Value range: [0, height/2]<br>Default value: height/2<br>If an invalid value is set, the default value is used. | 42 43## Attributes 44The [universal attributes](ts-component-general-attributes.md) are not supported. 45 46## ClickCallback 47 48type ClickCallback = () => void 49 50Callback invoked when the button is clicked. 51 52**Atomic service API**: This API can be used in atomic services since API version 18. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56## ProgressButtonV2Color 57Defines the color options for the download button. 58 59**Decorator type**: @ObservedV2 60 61### Properties 62 63**Atomic service API**: This API can be used in atomic services since API version 18. 64 65**System capability**: SystemCapability.ArkUI.ArkUI.Full 66 67| Name | Type | Mandatory| Decorator | Description | 68|-----------------|--------------|----|---------|---------------------------| 69| progressColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | \@Trace | Color of the progress indicator.<br>Default value: **undefined** | 70| borderColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | \@Trace | Border color of the button.<br>Default value: **undefined**| 71| textColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | \@Trace | Text color of the button.<br>Default value: **undefined**| 72| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | \@Trace | Background color of the button.<br>Default value: **undefined**| 73 74### constructor 75constructor(options: ProgressButtonV2ColorOptions); 76 77A constructor used to create a **ProgressButtonV2Color** object. 78 79**Atomic service API**: This API can be used in atomic services since API version 18. 80 81**System capability**: SystemCapability.ArkUI.ArkUI.Full 82 83| Name | Type | Mandatory| Description | 84|---------|------------------------------|----|-------| 85| options | ProgressButtonV2ColorOptions | Yes | Color settings.| 86 87## ProgressButtonV2ColorOptions 88 89Provides options for customizing the color of the download button. 90 91**Atomic service API**: This API can be used in atomic services since API version 18. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95| Name | Type | Mandatory| Description | 96|-----------------|--------------|----|----------------------------| 97| progressColor | ColorMetrics | No | Color of the progress indicator.<br>Default value: **undefined** | 98| borderColor | ColorMetrics | No | Border color of the button.<br>Default value: **undefined**| 99| textColor | ColorMetrics | No | Text color of the button.<br>Default value: **undefined**| 100| backgroundColor | ColorMetrics | No | Background color of the button.<br>Default value: **undefined**| 101 102## Events 103The [universal events](ts-component-general-events.md) are not supported. 104 105## Example 106 107This example demonstrates how to create a simple download button with a progress indicator that shows the loading status of a text file. 108```ts 109import { ColorMetrics, LengthMetrics, ProgressButtonV2, ProgressButtonV2Color } from '@kit.ArkUI' 110 111@Entry 112@ComponentV2 113struct Index { 114 @Local progressIndex: number = 0; 115 @Local textState: string = 'Download'; 116 @Local ButtonWidth: LengthMetrics = LengthMetrics.vp(200); 117 @Local isRunning: boolean = false; 118 @Local enableState: boolean = true; 119 120 build() { 121 Column() { 122 Scroll() { 123 Column({ space: 20 }) { 124 ProgressButtonV2({ 125 progress: this.progressIndex, 126 progressButtonWidth: this.ButtonWidth, 127 content: this.textState, 128 isEnabled: this.enableState, 129 onClicked: () => { 130 if (this.textState && !this.isRunning && this.progressIndex < 100) { 131 this.textState = 'Continue'; 132 } 133 this.isRunning = !this.isRunning; 134 let timer = setInterval(() => { 135 if (this.isRunning) { 136 if (this.progressIndex === 100) { 137 138 } else { 139 this.progressIndex++ 140 if (this.progressIndex === 100) { 141 this.textState = 'Completed'; 142 this.enableState = false; 143 } 144 } 145 } else { 146 clearInterval(timer); 147 } 148 }, 20); 149 } 150 }) 151 }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 }); 152 } 153 } 154 } 155} 156``` 157 158 159 160
