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