1# ProgressButton 2 3 4The **ProgressButton** component is a download button with a progress indicator that shows the download progress. 5 6 7> **NOTE** 8> 9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 10> 11> This component is not supported on wearables. 12 13 14## Modules to Import 15 16``` 17import { ProgressButton } from '@kit.ArkUI'; 18``` 19 20## Attributes 21The [universal attributes](ts-component-general-attributes.md) are not supported. 22 23## ProgressButton 24 25ProgressButton({progress: number, content: ResourceStr, progressButtonWidth?: Length, clickCallback: () => void, enable: 26boolean, colorOptions?: ProgressButtonColorOptions, progressButtonRadius?: LengthMetrics}) 27 28**Decorator**: @Component 29 30 31**System capability**: SystemCapability.ArkUI.ArkUI.Full 32 33| Name | Type | Mandatory| Decorator | Description | 34|-----------------------------------|---------------------------------------------------------------|----|--------|--------------------------------------------------------------------------------------------------------------------------------------| 35| progress | number | Yes | \@Prop | 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**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 36| content | [ResourceStr](ts-types.md#resourcestr) | Yes | \@Prop | Button text.<br>The default value is an empty string.<br>**NOTE**<br>The text is truncated with an ellipsis (...) if it exceeds the maximum display width of the component. The Resource type is supported since API version 20.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 37| progressButtonWidth | [Length](ts-types.md#length) | No | - | Button width, in vp.<br>The value must be greater than or equal to 44 vp.<br>The default value is **44vp**. Values less than the default value and invalid values are adjusted to the default value.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 38| clickCallback | () => void | Yes | - | Callback invoked when the button is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 39| enable | boolean | Yes | \@Prop | Whether the button can be clicked.<br> **true**: The button can be clicked.<br> **false**: The button cannot be clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 40| colorOptions<sup>18+<sup> | [ProgressButtonColorOptions](#progressbuttoncoloroptions18) | No | \@Prop | Color options of the button.<br>**Atomic service API**: This API can be used in atomic services since API version 18. | 41| progressButtonRadius<sup>18+<sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | \@Prop | 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.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 42 43## ProgressButtonColorOptions<sup>18+<sup> 44 45Defines the color options for the download button. 46 47**Atomic service API**: This API can be used in atomic services since API version 18. 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51| Name | Type | Mandatory| Description | 52|-----------------|----------------------------------------|----|-------------------------------------------------------------------| 53| progressColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the progress indicator.<br>Default value: **#330A59F7** | 54| borderColor | [ResourceColor](ts-types.md#resourcecolor) | No | Border color of the button.<br>Default value: **#330A59F7** | 55| textColor | [ResourceColor](ts-types.md#resourcecolor) | No | Text color of the button.<br>Default value: system default value | 56| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the button.<br>Default value: **\$r('sys.color.ohos_id_color_foreground_contrary')**| 57 58## Events 59The [universal events](ts-component-general-events.md) are not supported. 60 61## Example 62 63### Example 1: Creating a Download Button with a Progress Indicator 64This example demonstrates how to create a simple download button with a progress indicator that shows the loading status of a text file. 65```ts 66import { ProgressButton } from '@kit.ArkUI'; 67 68@Entry 69@Component 70struct Index { 71 @State progressIndex: number = 0; 72 @State textState: string = 'Download'; 73 @State buttonWidth: number = 200; 74 @State isRunning: boolean = false; 75 @State enableState: boolean = true; 76 77 build() { 78 Column() { 79 Scroll() { 80 Column({ space: 20 }) { 81 ProgressButton({ 82 progress: this.progressIndex, 83 progressButtonWidth: this.buttonWidth, 84 content: this.textState, 85 enable: this.enableState, 86 clickCallback: () => { 87 if (this.textState && !this.isRunning && this.progressIndex < 100) { 88 this.textState = 'Continue'; 89 } 90 this.isRunning = !this.isRunning; 91 let timer = setInterval(() => { 92 if (this.isRunning) { 93 if (this.progressIndex === 100) { 94 } else { 95 this.progressIndex++; 96 if (this.progressIndex === 100) { 97 this.textState = 'Completed'; 98 this.enableState = false; 99 } 100 } 101 } else { 102 clearInterval(timer); 103 } 104 }, 20) 105 } 106 }) 107 }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 }) 108 } 109 } 110 } 111} 112``` 113 114 115 116 117### Example 2: Implementing a Download Button with Custom Colors 118This example shows how to implement a download button with custom colors. 119```ts 120import { ProgressButton } from '@kit.ArkUI'; 121 122@Entry 123@Component 124struct Index { 125 @State progressIndex: number = 0; 126 @State textState: string = 'Download'; 127 @State buttonWidth: number = 200; 128 @State isRunning: boolean = false; 129 @State enableState: boolean = true; 130 131 build() { 132 Column() { 133 Scroll() { 134 Column({ space: 20 }) { 135 ProgressButton({ 136 // Set the color options of the download button. 137 colorOptions: { 138 progressColor: Color.Orange, 139 borderColor: Color.Black, 140 textColor: Color.Blue, 141 backgroundColor: Color.Pink 142 }, 143 progress: this.progressIndex, 144 progressButtonWidth: this.buttonWidth, 145 content: this.textState, 146 enable: this.enableState, 147 clickCallback: () => { 148 if (this.textState && !this.isRunning && this.progressIndex < 100) { 149 this.textState = 'Continue'; 150 } 151 this.isRunning = !this.isRunning; 152 let timer = setInterval(() => { 153 if (this.isRunning) { 154 if (this.progressIndex === 100) { 155 } else { 156 this.progressIndex++; 157 if (this.progressIndex === 100) { 158 this.textState = 'Completed'; 159 this.enableState = false; 160 } 161 } 162 } else { 163 clearInterval(timer); 164 } 165 }, 20) 166 } 167 }) 168 }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 }) 169 } 170 } 171 } 172} 173``` 174 175 176### Example 3: Implementing a Download Button with Custom Corner Radius 177This example shows how to implement a download button with custom corner radius. 178```ts 179import { ProgressButton, LengthMetrics } from '@kit.ArkUI'; 180 181@Entry 182@Component 183struct Index { 184 @State progressIndex: number = 0; 185 @State textState: string = 'Download'; 186 @State buttonWidth: number = 200; 187 @State isRunning: boolean = false; 188 @State enableState: boolean = true; 189 190 build() { 191 Column() { 192 Scroll() { 193 Column({ space: 20 }) { 194 ProgressButton({ 195 progressButtonRadius: LengthMetrics.vp (8), // Set the custom corner radius to 8 vp. 196 progress: this.progressIndex, 197 progressButtonWidth: this.buttonWidth, 198 content: this.textState, 199 enable: this.enableState, 200 clickCallback: () => { 201 if (this.textState && !this.isRunning && this.progressIndex < 100) { 202 this.textState = 'Continue'; 203 } 204 this.isRunning = !this.isRunning; 205 let timer = setInterval(() => { 206 if (this.isRunning) { 207 if (this.progressIndex === 100) { 208 } else { 209 this.progressIndex++; 210 if (this.progressIndex === 100) { 211 this.textState = 'Completed'; 212 this.enableState = false; 213 } 214 } 215 } else { 216 clearInterval(timer); 217 } 218 }, 20) 219 } 220 }) 221 }.alignItems(HorizontalAlign.Center).width('100%').margin({ top: 20 }) 222 } 223 } 224 } 225} 226``` 227 228
