antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
180 lines (146 loc) • 7.49 kB
Markdown
---
nav:
path: /components
group:
title: 数据录入
order: 10
toc: 'content'
---
Switch 开关选择器，比起原生 Switch，它实现了在 iOS 和 Android 端一致的体验。
- 当需要表示开关状态或两种状态之间切换时使用。
- 与 Checkbox 的区别在于，切换 Switch 会直接触发状态改变，而 Checkbox 通常用于状态标记，需要与提交操作配合使用。
在 `index.json` 中引入组件
```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);
},
});
```
> 传入 `disabled` 属性，禁用并置灰开关按钮。
```xml
<ant-switch defaultChecked="{{true}}" disabled="{{true}}" />
```
> - `checkedText`、`uncheckedText` 属性，可以修改选中/未选中时的内容。
> - `color` 属性，可以整体按钮的颜色氛围。
> - ` size` 属性，可以调整开关大小，支持 `medium`、`small`、`x-small` 三种选项。
> - `loading` 属性，设置加载态。
```xml
<ant-switch checkedText="开" uncheckedText="关" />
<!-- 支付宝模式下，支持插槽定制选中/未选中时的内容 -->
<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` 属性和 `change` 事件，配合使用实现受控模式。
```xml
<ant-switch
checked="{{checked}}"
defaultChecked="{{true}}"
onChange="handleChange"
bindchange="handleChange"
/>
<ant-button
onTap="handleChangeByButton"
bindtap="handleChangeByButton"
>
切换
</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>
| 属性 | 说明 | 类型 | 默认值 |
| --------------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- |
| className | 类名 | string | - |
| checkedText | 选中时的内容 | string \| slot | - |
| checked | 是否勾选 | boolean | - |
| color | 选中背景色 | string | - |
| defaultChecked | 默认是否勾选 | boolean | `false` |
| disabled | 是否禁用 | boolean | `false` |
| readonly | 是否只读 | boolean | `false` |
| loading | 是否加载状态 | boolean | `false` |
| uncheckedText | 非选中时的内容 | string \| slot | - |
| size | 组件尺寸，可选值为 `medium`、`small`、`x-small` | string | `medium` |
| style | 样式 | string | - |
|
|
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------- |
| --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;">