• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.advanced.ProgressButton (Download Button with Progress Indicator)
2
3
4The download button with progress indicator is a component 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 '@ohos.arkui.advanced.ProgressButton'
16```
17
18## Attributes
19The [universal attributes](ts-universal-attributes-size.md) are supported.
20
21## ProgressButton
22
23ProgressButton({progress: number, content: string, progressButtonWidth?: Length, clickCallback: () => void, enable: boolean})
24
25**Decorator**: @Component
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29**Parameters**
30
31| Name| Type| Mandatory| Decorator| Description|
32| -------- | -------- | -------- | -------- | -------- |
33| progress | number | Yes| \@Prop | Current download progress.|
34| content | string | Yes| \@Prop | Button text.|
35| progressButtonWidth | [Length](ts-types.md#length) | No| - | Width of the button.<br>Default value: **44**|
36| clickCallback | () =&gt; void | Yes| - | Callback invoked when the button is clicked.|
37| enable | boolean | Yes| \@Prop | Whether the button can be clicked.<br> **true**: The button can be clicked.<br> I**false**: The button cannot be clicked.|
38
39## Events
40The [universal events](ts-universal-events-click.md) are supported.
41
42## Example
43
44```ts
45import { ProgressButton } from '@ohos.arkui.advanced.ProgressButton'
46@Entry
47@Component
48struct Index {
49  @State halfProgress: number = 0
50  @State smallProgress: number = 0
51  @State bigProgress: number = 0
52  @State textState1: string = ''
53  @State isRunning1: boolean = false
54  @State enableState1: boolean = true
55  @State progressState: Visibility = Visibility.None
56  @State ButtonState: Visibility = Visibility.Visible
57  @State buttonText: string = 'Download'
58  @State buttonEnable: boolean = true
59  @State isEnd: boolean = false
60  build() {
61    Column({space: 20}) {
62      Text ('Download button with progress indicator')
63      Button(this.buttonText)
64        .fontSize($r('sys.float.ohos_id_text_size_button3'))
65        .fontWeight(FontWeight.Medium)
66        .fontColor($r('sys.color.ohos_id_color_emphasize'))
67        .padding({left: 8, right: 8})
68        .opacity(this.buttonEnable? 1: 0.4)
69        .enabled(this.buttonEnable)
70        .height(28)
71        .borderRadius(14)
72        .width(60)
73        .backgroundColor($r("sys.color.ohos_id_color_button_normal"))
74        .onClick(() => {
75          if(!this.isEnd) {
76            this.buttonText = 'Pending'
77            let timer1 = setInterval(() => {
78              this.progressState = Visibility.Visible
79              this.ButtonState = Visibility.None
80              clearInterval(timer1)
81              this.isRunning1 = true
82              let timer = setInterval(() => {
83                if (this.isRunning1) {
84                  if (this.halfProgress === 100) {
85                    this.isEnd = true
86                  } else {
87                    this.halfProgress++
88                    if (this.halfProgress === 100) {
89                      this.textState1 = 'Installing'
90                      this.enableState1 = false
91                      this.ButtonState = Visibility.Visible
92                      this.progressState = Visibility.None
93                      this.buttonEnable = false
94                      this.buttonText = 'Installing'
95                      let timer2 = setInterval(() => {
96                        this.buttonText = 'Open'
97                        this.buttonEnable = true
98                        this.isEnd = true
99                        clearInterval(timer2)
100                      }, 2000)
101                    }
102                    console.info('x progress++ = ' + this.halfProgress)
103                  }
104                } else {
105                  console.info('x isRunning = ' + false)
106                  clearInterval(timer)
107                }
108              }, 100)
109            }, 2000)
110          }
111        }).visibility(this.ButtonState)
112      ProgressButton({
113        progress: this.halfProgress,
114        progressButtonWidth: "60",
115        content: this.textState1,
116        enable: this.enableState1,
117
118        clickCallback: () => {
119          if (this.isRunning1 && this.halfProgress < 100) {
120            this.textState1 = 'Continue'
121          }
122          this.isRunning1 = !this.isRunning1
123          let timer = setInterval(() => {
124
125            if (this.isRunning1) {
126              if (this.halfProgress === 100) {
127              } else {
128                this.halfProgress++
129                if (this.halfProgress === 100) {
130                  this.textState1 = 'Installing'
131                  this.enableState1 = false
132                  this.ButtonState = Visibility.Visible
133                  this.progressState = Visibility.None
134                  this.buttonEnable = false
135                  this.buttonText = 'Installing'
136                  let timer2 = setInterval(() => {
137                    this.buttonText = 'Open'
138                    this.buttonEnable = true
139                    this.isEnd = true
140                    clearInterval(timer2)
141                  },2000)
142                }
143                console.info('x progress++ = ' + this.halfProgress)
144              }
145            } else {
146              console.info('x isRunning = ' + false)
147              clearInterval(timer)
148            }
149          }, 100)
150        }
151      }).visibility(this.progressState)
152    }.alignItems(HorizontalAlign.Center).width('100%')
153  }
154}
155```
156
157
158![en-us_image_0000001664713029](figures/en-us_image_0000001664713029.png)
159