---
name: Switch 开关
route: /guide/switch
menu: form
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import {Switch} from 'shineDev';
import code from "./demo";
import "./demo/index.scss";

# Switch 开关

## 概述

开关是一类特殊的单选框组件。该组件仅有两个相互对立的状态——开/关，用户可以通过移动滑块方式实现状态切换，通常用于表单中的配置项。

## 代码示例

<MessageBox messageType="info">
  为了让用户直观地查看代码演示，我们加入了{" "}
  <InlineCode>shine-switch-helper</InlineCode>{" "}
  修饰符，在开发过程中无需配置该字段。
</MessageBox>

#### 基础开关
最基础的用法，支持默认状态为开（或关），支持禁用。

<Example 
  display={<JsxParser {...code.basic} />}
  code={{code:code.basic.jsx}}
  components={code.basic.components}
/>

#### 带状态的开关
使用背景带有状态颜色的开关或滑块可以给用户产生更直观的视觉体验。

<Example 
  display={<JsxParser {...code.state} />}
  code={{code:code.state.jsx}}
  components={code.state.components}
/>

#### 尺寸
开关组件支持三种不同的尺寸。

<Example 
  display={<JsxParser {...code.size} />}
  code={{code:code.size.jsx}}
  components={code.size.components}
/>


## 配置参数

<PropsTable of={Switch} />