• 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```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组件添加progress方法，来实时显示下载进度条的进度。
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> setProgress方法只支持button的类型为download。
174
175
176## 场景示例
177
178在本场景中，开发者可根据输入的文本内容进行button类型切换。
179
180
181```html
182<!-- xxx.hml -->
183<div class="container">
184  <div class="input-item">
185    <input class="input-text" id="change" type="{{mytype}}"  placeholder="{{myholder}}"
186      style="background-color:{{mystyle1}};
187      placeholder-color:{{mystyle2}};flex-grow:{{myflex}};"name="{{myname}}" value="{{myvalue}}"></input>
188  </div>
189  <div class="input-item">
190    <div class="doc-row">
191      <input type="button" class="select-button color-3" value="text" onclick="changetype3"></input>
192      <input type="button" class="select-button color-3" value="data" onclick="changetype4"></input>
193    </div>
194  </div>
195</div>
196```
197
198
199```css
200/* xxx.css */
201.container {
202  flex-direction: column;
203  align-items: center;
204  background-color: #F1F3F5;
205}
206.input-item {
207  margin-bottom: 80px;
208  flex-direction: column;
209}
210.doc-row {
211  justify-content: center;
212  margin-left: 30px;
213  margin-right: 30px;
214  justify-content: space-around;
215}
216.input-text {
217  height: 80px;
218  line-height: 80px;
219  padding-left: 30px;
220  padding-right: 30px;
221  margin-left: 30px;
222  margin-right: 30px;
223  margin-top:100px;
224  border: 3px solid;
225  border-color: #999999;
226  font-size: 30px;
227  background-color: #ffffff;
228  font-weight: 400;
229}
230.select-button {
231  width: 35%;
232  text-align: center;
233  height: 70px;
234  padding-top: 10px;
235  padding-bottom: 10px;
236  margin-top: 30px;
237  font-size: 30px;
238  color: #ffffff;
239}
240.color-3 {
241  background-color: #0598db;;
242}
243```
244
245
246```js
247// xxx.js
248export default {
249  data: {
250    myflex: '',
251    myholder: 'Enter text.',
252    myname: '',
253    mystyle1: "#ffffff",
254    mystyle2: "#ff0000",
255    mytype: 'text',
256    myvalue: '',
257  },
258  onInit() {
259  },
260  changetype3() {
261    this.myflex = '';
262    this.myholder = 'Enter text.';
263    this.myname = '';
264    this.mystyle1 = "#ffffff";
265    this.mystyle2 = "#FF0000";
266    this.mytype = 'text';
267    this.myvalue = '';
268  },
269  changetype4() {
270    this.myflex = '';
271    this.myholder = 'Enter a date.';
272    this.myname = '';
273    this.mystyle1 = "#ffffff";
274    this.mystyle2 = "#FF0000";
275    this.mytype = 'date';
276    this.myvalue = '';
277  },
278}
279```
280
281
282![zh-cn_image_0000001234129289](figures/zh-cn_image_0000001234129289.gif)
283