Am-Switch

2023-03-28 12:11

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

copy

{
 "defaultTitle": "am-switch",
 "usingComponents": {
   "am-switch": "mini-ali-ui/es/am-switch/index"
 }
}

.axml

copy

<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

copy

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 `false`.
disabled	Boolean	An indicator of whether to disable the switch. The default value is `false`.
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 `false`. If the value is `true`, the value of checked is controlled by setData.