Am-Switch
You can use the am-switch component to change the state on or off. The specific usage is consistent with the basic switch component, but more styles are added in the extended am-switch component.
Note:
In iOS, the switch shape is round, while in Android the switch shape is square.
Sample code
See the sample codes in different languages:
.json
{
"defaultTitle": "am-switch",
"usingComponents": {
"am-switch": "mini-ali-ui/es/am-switch/index"
}
}
.axml
<view class="page">
<view class="page-description">am-switch</view>
<view class="page-section">
<view class="page-section-demo switch-list">
<view class="switch-item">
<am-switch checked onChange="switch1Change"/>
</view>
<view class="switch-item">
<am-switch color="red" checked />
</view>
</view>
</view>
</view>
.js
Page({
switch1Change(e) {
console.log('switch1 happen change event,carried value is', e.detail.value);
},
});
Parameters
Property | Type | Description |
name | String | Component name, which is used to obtain data by submitting the form. |
checked | Boolean | An indicator of whether the state is on. The default value is |
disabled | Boolean | An indicator of whether to disable the switch. The default value is |
onChange | (e: Object) => void | The event that is triggered when users change the state. |
color | String | Component color. Specify the color value in CSS. |
controlled | Boolean | An indicator of whether the component is controlled. The default value is |