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