---
title: Switch 开关 (done)
order: 5
group: 
  path: /components
nav: 
  title: 组件
  path: /components
---

## 使用

```jsx
import React from 'react';
import { Switch } from 'baas-ui';

import Table from './components/Table';

const columns = [
  { title: '使用案例', dataIndex: 'type' },
  { title: '例子', dataIndex: 'example' },
];

const dataSource = [
  {
    type: '基本用法',
    example: <Switch defaultChecked />,
  },
  {
    type: '尺寸大小',
    example: (
      <div>
        <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
        <br />
        <Switch
          size="small"
          checkedChildren="开"
          unCheckedChildren="关"
          defaultChecked
        />
      </div>
    ),
  },
  {
    type: '不可用',
    example: (
      <div>
        <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked disabled />
        <br />
        <Switch
          checkedChildren="开" 
          unCheckedChildren="关" 
          defaultChecked={false} 
          disabled
        />
      </div>
    ),
  },
];

export default () => (
  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey="type"
    pagination={false}
  />
)
```

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocus | 组件自动获取焦点 | boolean | false |
| checked | 指定当前是否选中 | boolean | false |
| checkedChildren | 选中时的内容 | string\|ReactNode |  |
| defaultChecked | 初始是否选中 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| loading | 加载中的开关 | boolean | false |
| size | 开关大小，可选值：`default` `small` | string | default |
| unCheckedChildren | 非选中时的内容 | string\|ReactNode |  |
| onChange | 变化时回调函数 | Function(checked: boolean, event: Event) |  |
| onClick | 点击时回调函数 | Function(checked: boolean, event: Event) |  |
| className | Switch 器类名 | string |  |

## 方法

| 名称    | 描述     |
| ------- | -------- |
| blur()  | 移除焦点 |
| focus() | 获取焦点 |