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

## 使用

```jsx
import React from 'react';
import { Switch, Icons } from 'quanta-design';
import Table from './components/Table';

const { CloseIcon, CheckIcon } = Icons;

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

const dataSource = [
  {
    type: '基本用法',
    example: <Switch defaultChecked />,
  },
  {
    type: '尺寸大小',
    example: (
      <div>
        <Switch defaultChecked />
        <br />
        <Switch size="small" defaultChecked />
      </div>
    ),
  },
  {
    type: '不可用',
    example: (
      <div>
        <Switch defaultChecked disabled />
        <br />
        <Switch defaultChecked={false} disabled />
      </div>
    ),
  },
  {
    type: '自定义图标',
    example: (
      <div>
        <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
        <br />
        <Switch
          checkedChildren={
            <CheckIcon
              width={12}
              height={12}
              style={{ fill: 'white', marginTop: 5 }}
            />
          }
          unCheckedChildren={
            <CloseIcon
              width={12}
              height={12}
              style={{ fill: 'white', marginTop: 5 }}
            />
          }
          defaultChecked={false}
        />
      </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() | 获取焦点 |