- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

### 基本用法

    import { BeSwitch } from '@brewer/beerui';
    let switchValue = true

    <BeSwitch bind:checked={switchValue} on:change={change} inactiveColor="#fff000"/>

显示代码

### 禁用状态

    <BeSwitch disabled={disabled} />

显示代码

### 改变前的回调

返回false会阻止Switch的切换

    <BeSwitch bind:checked={switchValue} beforeChange = {() => {return false}} />

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
checked | 绑定值 | booleanx | — | false
disabled | 是否禁用 | boolean | — | false
width | switch 的宽度（像素） | number | — | 40
activeColor | switch 打开时的背景色 | string | — | #409EFF
inactiveColor | switch 关闭时的背景色 | string | — | #C0CCDA
name | switch 对应的 name 属性 | string | — | —

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | switch 状态发生变化时的回调函数 | 新状态的值

### Slot

name | 说明
--- | ---
checked-slot | ?