1# button 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 7 8 9## 子组件 10 11不支持。 12 13 14## 属性 15 16除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 17 18| 名称 | 类型 | 默认值 | 必填 | 描述 | 19| ---------------------- | ------- | ----- | ---- | ---------------------------------------- | 20| type | string | - | 否 | 不支持动态修改。默认展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定。该属性可选值包括：<br/>- capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>- circle：圆形按钮，支持放置图标；<br/>- text：文本按钮，仅包含文本显示；<br/>- arc：弧形按钮，仅支持智能穿戴；<br/>- download：下载按钮，额外增加下载进度条功能。 | 21| value | string | - | 否 | button的文本值。 | 22| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 | 23| placement<sup>5+</sup> | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>- start：图标位于文本起始处；<br/>- end：图标位于文本结束处；<br/>- top：图标位于文本上方；<br/>- bottom：图标位于文本下方。 | 24| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 | 25 26 27## 样式 28 29 30### type设置为非arc 31 32除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 33 34| 名称 | 类型 | 默认值 | 必填 | 描述 | 35| ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- | 36| text-color | <color> | \#007dff<br/> | 否 | 按钮的文本颜色。 | 37| font-size | <length> | 16px<br/> | 否 | 按钮的文本尺寸。 | 38| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | 39| font-style | string | normal | 否 | 按钮的字体样式。 | 40| font-weight | number \| string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](js-components-basic-text.md#样式)。 | 41| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 42| icon-width | <length> | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 | 43| icon-height | <length> | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 | 44| radius | <length> | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | 45 46 47### type设置为arc 48 49除支持[通用样式](js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom]外，还支持如下样式： 50 51| 名称 | 类型 | 默认值 | 必填 | 描述 | 52| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- | 53| text-color | <color> | \#de0000 | 否 | 弧形按钮的文本颜色。 | 54| font-size | <length> | 37.5px | 否 | 弧形按钮的文本尺寸。 | 55| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | 56| font-style | string | normal | 否 | 弧形按钮的字体样式。 | 57| font-weight | number \| string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](js-components-basic-text.md#样式)。 | 58| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 59 60 61## 事件 62 63支持[通用事件](js-components-common-events.md)。 64 65 66## 方法 67 68支持[通用方法](js-components-common-methods.md)。 69 70类型为download时，支持如下方法： 71 72| 名称 | 参数 | 描述 | 73| ----------- | ------------------------------ | ---------------------------------------- | 74| setProgress | { progress:percent } | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>浮在进度条上的文字通过value值进行变更。 | 75 76## 示例 77 78```html 79<!-- xxx.hml --> 80<div class="div-button"> 81 <button class="first" type="capsule" value="Capsule button"></button> 82 <button class="button circle" type="circle" icon="common/ic_add_default.png"></button> 83 <button class="button text" type="text">Text button</button> 84 <button class="button download" type="download" id="download-btn" 85 onclick="progress">{{downloadText}}</button> 86 <button class="last" type="capsule" waiting="true">Loading</button> 87</div> 88``` 89 90```css 91/* xxx.css */ 92.div-button { 93 flex-direction: column; 94 align-items: center; 95} 96.first{ 97 background-color: #F2F2F2; 98 text-color: #0D81F2; 99} 100.button { 101 margin-top: 15px; 102} 103.last{ 104 background-color: #F2F2F2; 105 text-color: #969696; 106 margin-top: 15px; 107 width: 280px; 108 height:72px; 109} 110.button:waiting { 111 width: 280px; 112} 113.circle { 114 background-color: #007dff; 115 radius: 72px; 116 icon-width: 72px; 117 icon-height: 72px; 118} 119.text { 120 text-color: red; 121 font-size: 40px; 122 font-weight: 900; 123 font-family: sans-serif; 124 font-style: normal; 125} 126.download { 127 width: 280px; 128 text-color: white; 129 background-color: #007dff; 130} 131``` 132 133```js 134// xxx.js 135export default { 136 data: { 137 count: 5, 138 downloadText: "Download" 139 }, 140 progress(e) { 141 this.count+= 10; 142 this.downloadText = this.count+ "%"; 143 this.$element('download-btn').setProgress({ progress: this.count}); 144 if (this.count>= 100) { 145 this.downloadText = "Done"; 146 } 147 } 148} 149``` 150 151 152
