• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Button
2
3Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。具体用法请参考[Button API](../reference/arkui-js/js-components-basic-button.md)。
4
5
6## 创建Button组件
7
8在pages/index目录下的hml文件中创建一个Button组件。
9
10```
11<!-- xxx.hml -->
12<div class="container">
13  <button  type="capsule" value="Capsule button"></button>
14</div>
15```
16
17```
18/* xxx.css */
19.container {
20  width: 100%;
21  height: 100%;
22  flex-direction: column;
23  justify-content: center;
24  align-items: center;
25  background-color: #F1F3F5;
26}
27```
28
29![zh-cn_image_0000001211225091](figures/zh-cn_image_0000001211225091.png)
30
31
32## 设置Button类型
33
34通过设置Button的type属性来选择按钮类型，如定义Button为圆形按钮、文本按钮等。
35
36
37```
38<!-- xxx.hml -->
39<div class="container">
40  <button class="circle" type="circle" >+</button>
41  <button class="text" type="text"> button</button>
42</div>
43```
44
45
46```
47/* xxx.css */
48.container {
49  width: 100%;
50  height: 100%;
51  background-color: #F1F3F5;
52  flex-direction: column;
53  align-items: center;
54  justify-content: center;
55}
56.circle {
57  font-size: 120px;
58  background-color: blue;
59  radius: 72px;
60}
61.text {
62  margin-top: 30px;
63  text-color: white;
64  font-size: 30px;
65  font-style: normal;
66  background-color: blue;
67  width: 50%;
68  height: 100px;
69}
70```
71
72
73![zh-cn_image_0000001208771093](figures/zh-cn_image_0000001208771093.png)
74
75
76> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
77> - Button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../security/accesstoken-guidelines.md)。
78
79
80如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。
81
82
83```
84<!-- config.json -->
85"module": {
86  "reqPermissions": [{
87    "name": "ohos.permission.INTERNET"
88  }],
89}
90```
91
92
93## 显示下载进度
94
95为Button组件添加progress方法，来实时显示下载进度条的进度。
96
97```
98<!-- xxx.hml -->
99<div class="container">
100  <button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button>
101</div>
102```
103
104```
105/* xxx.css */
106.container {
107  width: 100%;
108  height: 100%;
109  background-color: #F1F3F5;
110  flex-direction: column;
111  align-items: center;
112  justify-content: center;
113}
114.download {
115  width: 280px;
116  text-color: white;
117  background-color: #007dff;
118}
119```
120
121```
122// xxx.js
123import prompt from '@system.prompt';
124export default {
125  data: {
126    percent: 0,
127    downloadText: "Download",
128    isPaused: true,
129    intervalId : null,
130  },
131  star(){
132    this.intervalId = setInterval(()=>{
133      if(this.percent <100){
134        this.percent += 1;
135        this.downloadText = this.percent+ "%";
136       } else{
137         prompt.showToast({
138            message: "Download succeeded."
139         })
140         this.paused()
141         this.downloadText = "Download";
142         this.percent = 0;
143         this.isPaused = true;
144       }
145    },100)
146  },
147  paused(){
148    clearInterval(this.intervalId);
149    this.intervalId = null;
150  },
151 setProgress(e) {
152    if(this.isPaused){
153      prompt.showToast({
154        message: "Started Downloading"
155      })
156      this.star();
157      this.isPaused = false;
158    }else{
159      prompt.showToast({
160        message: "Paused."
161      })
162      this.paused();
163      this.isPaused = true;
164    }
165  }
166}
167```
168
169![zh-cn_image_0000001208393581](figures/zh-cn_image_0000001208393581.gif)
170
171> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
172> setProgress方法只支持button的类型为download。
173
174
175## 场景示例
176
177在本场景中，开发者可根据输入的文本内容进行Button类型切换。
178
179
180```
181<!-- xxx.hml -->
182<div class="container">
183  <div class="input-item">
184    <input class="input-text" id="change" type="{{mytype}}"  placeholder="{{myholder}}"
185      style="background-color:{{mystyle1}};
186      placeholder-color:{{mystyle2}};flex-grow:{{myflex}};"name="{{myname}}" value="{{myvalue}}"></input>
187  </div>
188  <div class="input-item">
189    <div class="doc-row">
190      <input type="button" class="select-button color-3" value="text" onclick="changetype3"></input>
191      <input type="button" class="select-button color-3" value="data" onclick="changetype4"></input>
192    </div>
193  </div>
194</div>
195```
196
197
198```
199/* xxx.css */
200.container {
201  flex-direction: column;
202  align-items: center;
203  background-color: #F1F3F5;
204}
205.input-item {
206  margin-bottom: 80px;
207  flex-direction: column;
208}
209.doc-row {
210  justify-content: center;
211  margin-left: 30px;
212  margin-right: 30px;
213  justify-content: space-around;
214}
215.input-text {
216  height: 80px;
217  line-height: 80px;
218  padding-left: 30px;
219  padding-right: 30px;
220  margin-left: 30px;
221  margin-right: 30px;
222  margin-top:100px;
223  border: 3px solid;
224  border-color: #999999;
225  font-size: 30px;
226  background-color: #ffffff;
227  font-weight: 400;
228}
229.select-button {
230  width: 35%;
231  text-align: center;
232  height: 70px;
233  padding-top: 10px;
234  padding-bottom: 10px;
235  margin-top: 30px;
236  font-size: 30px;
237  color: #ffffff;
238}
239.color-3 {
240  background-color: #0598db;;
241}
242```
243
244
245```
246// xxx.js
247export default {
248  data: {
249    myflex: '',
250    myholder: 'Enter text.',
251    myname: '',
252    mystyle1: "#ffffff",
253    mystyle2: "#ff0000",
254    mytype: 'text',
255    myvalue: '',
256  },
257  onInit() {
258  },
259  changetype3() {
260    this.myflex = '';
261    this.myholder = 'Enter text.';
262    this.myname = '';
263    this.mystyle1 = "#ffffff";
264    this.mystyle2 = "#FF0000";
265    this.mytype = 'text';
266    this.myvalue = '';
267  },
268  changetype4() {
269    this.myflex = '';
270    this.myholder = 'Enter a date.';
271    this.myname = '';
272    this.mystyle1 = "#ffffff";
273    this.mystyle2 = "#FF0000";
274    this.mytype = 'date';
275    this.myvalue = '';
276  },
277}
278```
279
280
281![zh-cn_image_0000001234129289](figures/zh-cn_image_0000001234129289.gif)
282