1# button 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9 10按钮组件，包括胶囊按钮、圆形按钮和文本按钮。 11 12> **说明：** 13> 14> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15 16## 子组件 17 18不支持。 19 20 21## 属性 22 23除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性。 24 25| 名称 | 类型 | 默认值 | 必填 | 描述 | 26| -------- | -------- | -------- | -------- | -------- | 27| type | string | capsule | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，可选值如下：<br/>- "capsule"：胶囊型按钮，带圆角按钮，有背景色和文本。<br/>- "circle"：圆形按钮，支持放置图标。<br/>- "text"：文本按钮，仅包含文本显示。 | 28| value | string | - | 否 | button的文本值，circle类型不生效。 | 29| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 | 30| placement | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>- "start"：图标位于文本起始处。<br/>- "end"：图标位于文本结束处。<br/>- "top"：图标位于文本上方。<br/>- "bottom"：图标位于文本下方。 | 31| waiting | boolean | false | 否 | 是否处于waiting状态，值为true时展现等待中转圈效果，位于文本左侧。值为false时，不展示等待中效果。类型为download时不生效。 | 32 33 34## 事件 35 36支持[通用事件](js-service-widget-common-events.md)。 37 38 39## 样式 40 41除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式： 42 43| 名称 | 类型 | 默认值 | 必填 | 描述 | 44| -------- | -------- | -------- | -------- | -------- | 45| text-color | <color> | - | 否 | 按钮的文本颜色。 | 46| font-size | <length> | - | 否 | 按钮的文本尺寸。 | 47| font-style | string | normal | 否 | 按钮的字体样式。 | 48| font-weight | number \| string | normal | 否 | 按钮的字体粗细，见[text组件font-weight的样式属性](js-service-widget-basic-text.md#样式)。 | 49| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-service-widget-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 50| icon-width | <length> | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 | 51| icon-height | <length> | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 | 52| radius | <length> | - | 否 | 圆形按钮半径或者胶囊按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | 53 54> **说明：** 55> - 胶囊按钮（type=capsule）时，不支持border相关样式。 56> 57> - 圆形按钮（type=circle）时，不支持文本相关样式。 58> 59> - 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。 60 61 62## 示例 63 64 65```html 66<!-- xxx.hml --> 67<div class="div-button"> 68 <button class="button" type="capsule" value="Capsule button"></button> 69 <button class="button circle" type="circle" icon="common/ic_add_default.png"></button> 70 <button class="button text" type="text">Text button</button> 71</div> 72``` 73 74 75```css 76/* xxx.css */ 77.div-button { 78 flex-direction: column; 79 align-items: center; 80} 81.button { 82 margin-top: 15px; 83} 84.circle { 85 background-color: #007dff; 86 radius: 72px; 87 icon-width: 72px; 88 icon-height: 72px; 89} 90.text { 91 text-color: red; 92 font-size: 40px; 93 font-weight: 900; 94 font-family: sans-serif; 95 font-style: normal; 96} 97``` 98**4*4卡片** 99 100 101 102
