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