A switch is a component which controls the ON and OFF states. It provides a consistent experience for iOS and Android users compared with native switch components. The difference between a checkbox and a switch is that turning on or off the switch directly triggers the status change, however, the checkbox is used for marking a status and needs to be used with the submission operation.
Property
Property | Type | Required | Default value | Description |
checked | boolean | No | - | Whether to select the switch. |
disabled | boolean | No | false | Whether to disable the component. |
loading | boolean | No | false | Whether to load the status of the switch. |
color | string | No | #1677ff | # color of the background when the switch is turned on. |
checkedText | string | No | - | The content displayed when the switch is turned on. |
uncheckedText | string | No | - | The content displayed when the switch is turned off. |
size | 'medium' | 'small' | 'x-small' | No | medium | The size of the switch. |
controlled | boolean | No | false | Whether the switch is controlled. |
mode | 'normal' |'form' | No | 'normal' | When you use a switch with a From/FormItem component, you must set mode to from. |
className | string | No | - | The class name. |
Event
Event name | Description | Type |
onChange | Callback fired when the switch is tapped. |
|
Slot
Name | Description |
checked | The content slot when the switch is turned on. |
unchecked | The content slot when the switch is turned off. |
Style class
Class name | Description |
amd-switch | The style of the entire switch. |
amd-switch-checked | The style of the switch that is turned on. |
amd-switch-disabled | The style of the switch in disabled mode. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<view>
<demo-block title="Basic usage">
<switch
checked="{{false}}"
onChange="handleChange"
/>
</demo-block>
<demo-block title="Have default value">
<switch
checked="{{true}}"/>
</demo-block>
<demo-block title="Text and icons">
<switch
checkedText="Open"
uncheckedText="Close"/>
<switch>
<am-icon type="CheckOutline" slot="checked" size="x-small"/>
<am-icon type="CloseOutline" slot="unchecked" size="x-small"/>
</switch>
</demo-block>
<demo-block title="Custom color">
<switch
checked="{{true}}"
color="#00b578"/>
</demo-block>
<demo-block title="Disabled status">
<switch
checked="{{true}}"
disabled="{{true}}"/>
<switch
disabled="{{true}}"/>
</demo-block>
<demo-block title="Loading status">
<switch
loading="{{true}}"/>
</demo-block>
<demo-block title="size small">
<switch size="small" />
</demo-block>
</view>The following shows an example of the code in the index.js file:
Page({
data: {
value: false,
},
handleChange(checked) {
console.log('change checked', checked)
my.alert({
title: `The current switch is ${checked ? 'on' : 'off'} status. `,
});
},
});The following shows an example of the code in the index.acss file:
.amd-switch {
margin-right: 16rpx;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "Switch",
"usingComponents": {
"switch": "antd-mini/es/Switch/index",
"demo-block": "../../components/DemoBlock/index",
"am-icon": "antd-mini/es/Icon/index"
}
}