button开发指导
==========

button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。具体用法请参考[button API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-basic-button)。

#### 创建button组件

在pages/index目录下的hml文件中创建一个button组件。

<!-- xxx.hml -->
<div class="container">       
  <button  type="capsule" value="Capsule button"></button>
</div>

/\* xxx.css \*/
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1f/v3/hUeGuhCMT9WwIhWiCnEU5w/zh-cn_image_0000002594668304.png?HW-CC-KV=V1&HW-CC-Date=20260612T073320Z&HW-CC-Expire=86400&HW-CC-Sign=6C7B937EB29F1A41585F9867F81314AD041F3469D89A931767CD2514872C7E63)

#### 设置button类型

通过设置button的type属性来选择按钮类型，如定义button为圆形按钮、文本按钮等。

<!-- xxx.hml -->
<div class="container">    
  <button class="circle" type="circle" >+</button>
  <button class="text" type="text"> button</button>
</div>

/\* xxx.css \*/
.container {
  width: 100%;
  height: 100%;
  background-color: #F1F3F5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.circle {
  font-size: 120px;
  background-color: blue;
  radius: 72px;
}
.text {
  margin-top: 30px;
  text-color: white;
  font-size: 30px;
  font-style: normal;
  background-color: blue;
  width: 50%;
  height: 100px;
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ba/v3/WXsptOcfQWuGGglrygH8eg/zh-cn_image_0000002594828232.png?HW-CC-KV=V1&HW-CC-Date=20260612T073320Z&HW-CC-Expire=86400&HW-CC-Sign=CC8E17B68399A611E839E20A0A295BC08F237AB4D65F430FDE81BE8697CDEB03)

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d8/v3/gcOduoUoTTuYY4v0Dr1PZg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073320Z&HW-CC-Expire=86400&HW-CC-Sign=35A7F65DB3A192A52F4E6A28D5AF03D19E7506B1ECE506222C7E7973FE16FE68)

*   button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。

如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。

<!-- config.json -->
"module": {
  "reqPermissions": \[{
    "name": "ohos.permission.INTERNET"
  }\],
}

#### 显示下载进度

为button组件添加setProgress方法，来实时显示下载进度条的进度。

<!-- xxx.hml -->
<div class="container">
  <button class="button download" type="download" id="download-btn" onclick="setProgress">{{downloadText}}</button>
</div>

/\* xxx.css \*/
.container {
  width: 100%;
  height: 100%;
  background-color: #F1F3F5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.download {
  width: 280px;
  text-color: white;
  background-color: #007dff;
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  data: {
    percent: 0,
    downloadText: "Download",
    isPaused: true,
    intervalId : null,
  },
  start(){
    this.intervalId = setInterval(()=>{
      if(this.percent <100){
        this.percent += 1;
        this.downloadText = this.percent+ "%";
       } else{
         promptAction.showToast({
            message: "Download succeeded."
         })
         this.paused()
         this.downloadText = "Download";
         this.percent = 0;
         this.isPaused = true;
       }
    },100)
  },
  paused(){
    clearInterval(this.intervalId);
    this.intervalId = null;
  },
 setProgress(e) {
    if(this.isPaused){
      promptAction.showToast({
        message: "Started Downloading"
      })
      this.start();
      this.isPaused = false;
    }else{
      promptAction.showToast({
        message: "Paused."
      })
      this.paused();
      this.isPaused = true;
    }
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d6/v3/k0abSCXQTYatQj3gtvcgEA/zh-cn_image_0000002625187679.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073320Z&HW-CC-Expire=86400&HW-CC-Sign=7512B2BC4850E90E5A8E48FA1591E43B0D87C24C1B2D9A4764771F366E0B339F)

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8a/v3/-kefpebgQ_iYOUopIKhZ_w/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073320Z&HW-CC-Expire=86400&HW-CC-Sign=A5A6F20F0F263B36187492218DA5A5E45E67086770EC5217280EEE0E778A5F83)

setProgress方法只支持button的类型为download。

#### 场景示例

在本场景中，开发者可根据输入的文本内容进行button类型切换。

<!-- xxx.hml -->
<div class="container">
  <div class="input-item">
    <input class="input-text" id="change" type="{{mytype}}"  placeholder="{{myholder}}"
      style="background-color:{{mystyle1}};
      placeholder-color:{{mystyle2}};flex-grow:{{myflex}};"name="{{myname}}" value="{{myvalue}}"></input>
  </div>
  <div class="input-item">
    <div class="doc-row">
      <input type="button" class="select-button color-3" value="text" onclick="changetype3"></input>
      <input type="button" class="select-button color-3" value="data" onclick="changetype4"></input>
    </div>
  </div>
</div>

/\* xxx.css \*/
.container {
  flex-direction: column;
  align-items: center;
  background-color: #F1F3F5;
}
.input-item {
  margin-bottom: 80px;
  flex-direction: column;
}
.doc-row {
  justify-content: center;
  margin-left: 30px;
  margin-right: 30px;
}
.input-text {
  height: 80px;
  line-height: 80px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: 30px;
  margin-right: 30px;
  margin-top:100px;
  border: 3px solid;
  border-color: #999999;
  font-size: 30px;
  background-color: #ffffff;
  font-weight: 400;
}
.select-button {
  width: 35%;
  text-align: center;
  height: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 30px;
  font-size: 30px;
  color: #ffffff;
}
.color-3 {
  background-color: #0598db;
}

// xxx.js
export default {
  data: {
    myflex: '',
    myholder: 'Enter text.',
    myname: '',
    mystyle1: "#ffffff",
    mystyle2: "#ff0000",
    mytype: 'text',
    myvalue: '',
  },
  onInit() {
  },
  changetype3() {
    this.myflex = '';
    this.myholder = 'Enter text.';
    this.myname = '';
    this.mystyle1 = "#ffffff";
    this.mystyle2 = "#FF0000";
    this.mytype = 'text';
    this.myvalue = '';
  },
  changetype4() {
    this.myflex = '';
    this.myholder = 'Enter a date.';
    this.myname = '';
    this.mystyle1 = "#ffffff";
    this.mystyle2 = "#FF0000";
    this.mytype = 'date';
    this.myvalue = '';
  },
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/67/v3/BVORLlArQd6aZ41_yps_qg/zh-cn_image_0000002625107823.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073320Z&HW-CC-Expire=86400&HW-CC-Sign=FF5B1F0F3A09B3C4F5D02393246C032740FB26971592A3D9900EE6CDA565DE63)