## OPSwitch 开关按钮组件

·API

| 参数      | 说明                   | 类型                | 默认值   |
| --------- | ---------------------- | ------------------- | -------- |
| text      | 按钮文字               | string              | -        |
| hotKey    | 快捷键                 | string              | -        |
| size      | 按钮大小               | 'small'             | -        |
| value     | 开关值                 | boolean             | -        |
| onChange  | 点击按钮(热键)触发函数 | Function            | ()=>void |
| readOnly  | 是否只读               | boolean             | -        |
| disabled  | 表示开关被禁用         | boolean             | -        |
| className | 自定义类名             | string              | -        |
| style     | 自定义内敛样式         | React.CSSProperties | -        |

```jsx
import React, { useState } from 'react';
import { Button, Icon, Box } from '@alife/cn-ui';
import ReactDOM from 'react-dom';
import { OPSwitch } from '../src/view';

const OPSwitchComponent = () => {
  const [v1, setV1] = useState(false);
  const [v2, setV2] = useState(false);
  const [v3, setV3] = useState(false);

  return (
    <Box spacing={12}>
      <h1>简单-{v1.toString()}</h1>
      <OPSwitch
        value={v1}
        onChange={(v) => {
          setV1(v);
        }}
      />
      <br />
      <h1>带文案-{v2.toString()}</h1>
      <OPSwitch
        text='按单找货'
        value={v2}
        onChange={(v) => {
          setV2(v);
        }}
      />
      <br />
      <h1>快捷键-{v3.toString()}</h1>
      <OPSwitch
        text='多货登记'
        hotKey='F8'
        value={v3}
        onChange={(v) => {
          setV3(v);
        }}
      />
      <br />
      <h1>悬浮提示</h1>
      <OPSwitch
        text='悬浮提示'
        hotKey='F8'
        value={v3}
        onChange={(v) => {
          setV3(v);
        }}
        balloon={{
          children: '功能介绍',
        }}
      />
      <br />
      <h1>只读</h1>
      <OPSwitch text='批量复核' readOnly={true} value={true} />
    </Box>
  );
};

ReactDOM.render(<OPSwitchComponent />, mountNode);
```

```css
.my-css {
  /* codes here */
  color: #fff;
}
```