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