# Switch 开关

[toc]

`Switch` 这个组件在拥有原生体验的同时，也提供了灵活的可扩展的能力。

## 组件引入

在`app.json`或页面`index.json`中引入：

```json
{
  "usingComponents": {
    "tea-switch": "../../dist/switch/index"
  }
}
```

## 用法

-   基本用法

```html
<tea-list title="基础用法">
  <tea-item title="是否开启">
    <tea-switch></tea-switch>
  </tea-item>

  <tea-item title="激活状态">
    <tea-switch checked></tea-switch>
  </tea-item>
</tea-list>
```

-   指定颜色

```html
<tea-list title="指定颜色">
  <tea-item title="是否开启">
    <tea-switch color="#ff9d00"></tea-switch>
  </tea-item>
</tea-list>
```

-   禁用状态

```html
<tea-list  title="禁用状态">
  <tea-item title="是否开启">
    <tea-switch disabled></tea-switch>
  </tea-item>
</tea-list>
```

-   正在加载

```html
<tea-list title="正在加载">
  <tea-item title="是否开启">
    <tea-switch loading></tea-switch>
  </tea-item>
  <tea-item title="激活状态">
    <tea-switch checked loading></tea-switch>
  </tea-item>
  <tea-item title="禁用状态">
    <tea-switch disabled loading></tea-switch>
  </tea-item>
</tea-list>
```

-   指定大小

```html
<tea-list title="指定大小">
  <tea-item title="是否开启">
    <tea-switch size="24"></tea-switch>
  </tea-item>
  <tea-item title="是否开启">
    <tea-switch loading size="24"></tea-switch>
  </tea-item>
</tea-list>
```

## Props

| 参数       | 描述         | 类型        | 默认值       |
| -------- | ---------- | --------- | --------- |
| name     | 在表单内提交的标志符 | `String`  | -         |
| color    | 开关打开时的背景颜色 | `String`  | `#006EFF` |
| checked  | 开关选中状态     | `Boolean` | `false`   |
| disabled | 是否为禁用状态    | `Boolean` | `false`   |
| loading  | 是否为加载状态    | `Boolean` | `false`   |
| size     | 开关尺寸       | `Number`  | `28`      |

## 事件

| 事件名    | 说明      | 参数                  |
| ------ | ------- | ------------------- |
| change | 切换之后的回调 | e.detail: 是否选中开关的对象 |

## 外部样式类

| 类名          | 说明       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                                     | 默认值                         | 描述          |
| --------------------------------------- | --------------------------- | ----------- |
| switch-background-color                 | @form-background-base-color | 开关的背景颜色     |
| switch-border-color                     | #DDD                        | 开关的边框颜色     |
| switch-disabled-background-color        | #f2f2f2                     | 开关禁用态时的颜色   |
| switch-active-disabled-background-color | rgba(0, 110, 255, .3)       | 开关禁用选中态时的颜色 |

## 演示

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/qCJMQ6mV7ucb)