toggle

The <toggle> component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles.

Required Permissions

None

Child Component

Not supported

Attributes

In addition to the attributes in Universal Attributes, the following attributes are supported.

Name Type Default Value Mandatory Description
value string - Yes Text value of the toggle.
checked boolean false No Whether the toggle is selected.

Styles

In addition to the styles in Universal Styles, the following styles are supported.

Name Type Default Value Mandatory Description
text-color <color> #E5000000 No Text color of the toggle.
font-size <length> 16px No Font size of the toggle.
allow-scale boolean true No Whether the font size changes with the system's font size settings.
NOTE:
If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.
font-style string normal No Font style of the toggle.
font-weight number | string normal No Font weight of the toggle. For details, see font-weight of the text component.
font-family <string> sans-serif No Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

Events

In addition to the events in Universal Events, the following events are supported.

Name Parameter Description
change { checked: isChecked } Triggered when the toggle is selected or unselected.

Methods

Methods in Universal Methods are supported.

Example

<!-- xxx.hml -->
<div style="flex-direction: column;">
  <text class="margin">1. Multiple choice example</text>
  <div style="flex-wrap: wrap">
    <toggle class="margin" for="{{toggles}}">{{$item}}</toggle>
  </div>
  <text class="margin">2. Single choice example</text>
  <div style="flex-wrap: wrap">
    <toggle class="margin" for="{{toggle_list}}" id="{{$item.id}}" checked="{{$item.checked}}" 
      value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
  </div>
</div>
/* xxx.css */
.margin {
  margin: 7px;
}
// xxx.js
export default {
  data: {
    toggle_list: [
      { "id":"1001", "name":"Living room", "checked":true },
      { "id":"1002", "name":"Bedroom", "checked":false },
      { "id":"1003", "name":"Second bedroom", "checked":false },
      { "id":"1004", "name":"Kitchen", "checked":false },
      { "id":"1005", "name":"Study", "checked":false },
      { "id":"1006", "name":"Garden", "checked":false },
      { "id":"1007", "name":"Bathroom", "checked":false },
      { "id":"1008", "name":"Balcony", "checked":false },
    ],
    toggles: ["Living room","Bedroom","Kitchen","Study"],
    idx: ""
  },
  allclick(arg) {
    this.idx = arg
  },
  allchange(e) {
    if (e.checked === true) {
      for (var i = 0; i < this.toggle_list.length; i++) {
        if (this.toggle_list[i].id === this.idx) {
          this.toggle_list[i].checked = true
        } else {
          this.toggle_list[i].checked = false
        }
      }
    }
  }
}

img