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