1# toggle 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 13 14 15## 权限列表 16 17无 18 19 20## 子组件 21 22不支持。 23 24 25## 属性 26 27除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 28 29| 名称 | 类型 | 默认值 | 必填 | 描述 | 30| ------- | ------- | ----- | ---- | ---------- | 31| value | string | - | 是 | 状态按钮的文本值。 | 32| checked | boolean | false | 否 | 状态按钮是否被选中。true表示选中，false表示未选中。 | 33 34 35## 样式 36 37除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 38 39| 名称 | 类型 | 默认值 | 必填 | 描述 | 40| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- | 41| text-color | <color> | \#E5000000 | 否 | 状态按钮的文本颜色。 | 42| font-size | <length> | 16px | 否 | 状态按钮的文本尺寸。 | 43| allow-scale | boolean | true | 否 | 状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。true表示跟随系统放大缩小，false表示不跟随系统放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | 44| font-style | string | normal | 否 | 状态按钮的字体样式。 | 45| font-weight | number \| string | normal | 否 | 状态按钮的字体粗细。见[text组件font-weight的样式属性](js-components-basic-text.md#样式)。 | 46| font-family | <string> | sans-serif | 否 | 状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 47 48 49## 事件 50 51除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 52 53| 名称 | 参数 | 描述 | 54| ------ | ------------------------------- | -------------- | 55| change | { checked：isChecked } | 组件选中状态发生变化时触发。 | 56 57 58## 方法 59 60支持[通用方法](js-components-common-methods.md)。 61 62 63## 示例 64 65```html 66<!-- xxx.hml --> 67<div style="flex-direction: column;"> 68 <text class="margin">1. Multiple choice example</text> 69 <div style="flex-wrap: wrap"> 70 <toggle class="margin" for="{{toggles}}">{{$item}}</toggle> 71 </div> 72 <text class="margin">2. Single choice example</text> 73 <div style="flex-wrap: wrap"> 74 <toggle class="margin" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}" 75 value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle> 76 </div> 77</div> 78``` 79 80```css 81/* xxx.css */ 82.margin { 83 margin: 7px; 84} 85``` 86 87```js 88// xxx.js 89export default { 90 data: { 91 toggle_list: [ 92 { 93 "id": "1001", "name": "Living room", "checked": true 94 }, 95 { 96 "id": "1002", "name": "Bedroom", "checked": false 97 }, 98 { 99 "id": "1003", "name": "Second bedroom", "checked": false 100 }, 101 { 102 "id": "1004", "name": "Kitchen", "checked": false 103 }, 104 { 105 "id": "1005", "name": "Study", "checked": false 106 }, 107 { 108 "id": "1006", "name": "Garden", "checked": false 109 }, 110 { 111 "id": "1007", "name": "Bathroom", "checked": false 112 }, 113 { 114 "id": "1008", "name": "Balcony", "checked": false 115 }, 116 ], 117 toggles: ["Living room", "Bedroom", "Kitchen", "Study"], 118 idx: "" 119 }, 120 allclick(arg) { 121 this.idx = arg; 122 }, 123 allchange(e) { 124 if (e.checked != true) { 125 return; 126 } 127 for (var i = 0; i < this.toggle_list.length; i++) { 128 if (this.toggle_list[i].id === this.idx) { 129 this.toggle_list[i].checked = true; 130 } else { 131 this.toggle_list[i].checked = false; 132 } 133 } 134 } 135} 136``` 137 138 139
