---
title: WKSwitch 开关
group:
  title: 表单组件
  path: /form/
---

## 何时使用

开关

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useCallback, useState } from 'react';
import { WKSwitch } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [active, setActive] = useState(true);

  const handleChange = useCallback(val => {
    setActive(val);
  }, []);

  return (
    <PageWrapper title="基本使用">
      <WKSwitch checked={active} onChange={handleChange} />
    </PageWrapper>
  );
};
```

## 禁用

```tsx
/**
 * title: 禁用
 * desc: 禁用
 */
import React, { useCallback, useState } from 'react';
import { WKSwitch } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [active, setActive] = useState(true);

  const handleChange = useCallback(val => {
    setActive(val);
  }, []);

  return (
    <PageWrapper title="禁用">
      <WKSwitch checked={active} onChange={handleChange} disabled />
    </PageWrapper>
  );
};
```

## 尺寸

```tsx
/**
 * title: 尺寸
 * desc: 开关有小, 中, 大 三种尺寸 通过设置 size 为small default large 分别把按钮设为 小,中,大尺寸。若不设置 size，则尺寸为中/default。
 */
import React, { useCallback, useState } from 'react';
import { WKSwitch } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [active, setActive] = useState(true);

  const handleChange = useCallback(val => {
    setActive(val);
  }, []);

  return (
    <PageWrapper title="尺寸">
      <WKSwitch checked={active} onChange={handleChange} size="small" />
      <WKSwitch checked={active} onChange={handleChange} />
      <WKSwitch checked={active} onChange={handleChange} size="large" />
    </PageWrapper>
  );
};
```

## 自定义颜色

```tsx
/**
 * title: 自定义颜色
 * desc: 修改选中的颜色和未选中颜色
 */
import React, { useCallback, useState } from 'react';
import { WKSwitch } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [active, setActive] = useState(true);

  const handleChange = useCallback(val => {
    setActive(val);
  }, []);

  return (
    <PageWrapper title="自定义颜色">
      <WKSwitch checked={active} onChange={handleChange} activeColor="green" inactiveColor="red" />
    </PageWrapper>
  );
};
```

## 自定义文字

```tsx
/**
 * title: 自定义文字
 * desc: 修改选中的文字和未选中文字
 */
import React, { useCallback, useState } from 'react';
import { WKSwitch } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [active, setActive] = useState(true);

  const handleChange = useCallback(val => {
    setActive(val);
  }, []);

  return (
    <PageWrapper title="自定义文字">
      <WKSwitch checked={active} onChange={handleChange} checkedContent="开" unCheckedContent="关" />
    </PageWrapper>
  );
};
```

## 加载中

```tsx
/**
 * title: 加载中
 */
import React, { useCallback, useState } from 'react';
import { WKSwitch } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  const [active, setActive] = useState(true);
  const [loading, setLoading] = useState(false);

  const handleChangeLoading = useCallback(val => {
    setLoading(true);

    setTimeout(() => {
      setActive(val);
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <PageWrapper title="加载中">
      <WKSwitch checked={active} loading={loading} onChange={handleChangeLoading} />
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKSwitch/index.d.ts'></API>
