antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
180 lines (146 loc) • 7.73 kB
Markdown
---
nav:
path: /components
group:
title: Information Entry
order: 10
toc: 'content'
---
Switch selector, compared to the native Switch, it achieves a consistent experience on iOS and Android.
- Used when it is necessary to indicate the state of a switch or to switch between two states.
- The difference with Checkbox is that switching Switch will directly trigger a state change, while Checkbox is usually used for state markers and needs to be used in conjunction with commit operations.
In `index.json` Introducing Components in
```json
"usingComponents": {
"ant-switch": "antd-mini/es/Switch/index"
"ant-switch": "antd-mini/Switch/index"
}
```
```xml
<ant-switch
defaultChecked="{{true}}"
onChange="onChange"
bindchange="onChange"
/>
```
```js
Page({
onChange(checked, e) {
console.log(checked);
},
});
```
> Incoming `disabled` property, disable the juxtaposition gray switch button.
```xml
<ant-switch defaultChecked="{{true}}" disabled="{{true}}" />
```
> - `checkedText`、`uncheckedText` Property, you can modify the contents when checked/unchecked.
> - `color` property, you can color the overall button atmosphere.
> - ` size` property, the switch can be resized, support `medium`、`small`、`x-small` Three options.
> - `loading` Property to set the loading state.
```xml
<ant-switch checkedText="开" uncheckedText="关" />
<!-- 支付宝模式下，支持插槽定制选中/未Content when selected -->
<ant-switch>
<ant-icon type="CheckOutline" slot="checkedText" />
<ant-icon type="CloseOutline" slot="uncheckedText" />
</ant-switch>
<ant-switch defaultChecked="{{true}}" color="#00b578" />
<ant-switch size="medium" />
<ant-switch size="small" />
<ant-switch size="x-small" />
<ant-switch loading />
```
> `checked` property and `change` Events, used in conjunction with the implementation of controlled mode.
```xml
<ant-switch
checked="{{checked}}"
defaultChecked="{{true}}"
onChange="handleChange"
bindchange="handleChange"
/>
<ant-button
onTap="handleChangeByButton"
bindtap="handleChangeByButton"
>
Switch
</ant-button>
```
```js
Page({
data: {
checked: true,
},
handleChange(checked, e) {
this.setData({
checked,
});
this.setData({
checked: checked.detail,
});
},
handleChangeByButton() {
console.log(this.data.checked);
this.setData({
checked: !this.data.checked,
});
},
});
```
<code src='../../demo/pages/Switch/index'></code>
| Property | Description | Type | Default Value |
| --------------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- |
| className | Class Name | string | - |
| checkedText | Content when selected | string \| slot | - |
| checked | Check | boolean | - |
| color | Selected background color | string | - |
| defaultChecked | Checked by default | boolean | `false` |
| disabled | Disable | boolean | `false` |
| readonly | Read-only | boolean | `false` |
| loading | Load status | boolean | `false` |
| uncheckedText | Content when not selected | string \| slot | - |
| size | Component size, optional value is `medium`、`small`、`x-small` | string | `medium` |
| style | Style | string | - |
|
|
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Light Mode Default | Dark Mode Default | Remarks |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------- |
| --switch-fill | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">
| --switch-border-color | <div style="width: 150px; height: 30px; background-color: #eeeeee; color: #333333;">
| --switch-loading-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">
| --switch-handle-bg | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">
| --switch-inner-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">