Switch 开关

使用场景

开/关切换器切换单个设置选项的状态。开关控制器中的选项，以及它所在的状态，应该用伴随的内联标签显示清楚。

示例

基本示例

inline

function Basic() { return ( <Group> <Switch defaultChecked onChange={console.log} /> <Switch defaultChecked={false} onChange={console.log} /> <Switch disabled /> <Switch checked disabled /> </Group> ); }

function Basic() {
  return (
    <Group>
      <Switch defaultChecked onChange={console.log} />

      <Switch defaultChecked={false} onChange={console.log} />

      <Switch disabled />

      <Switch checked disabled />
    </Group>
  );
}

是否有标签文案

inline

function HasLabel() { return ( <Group> <Switch hasLabel onChange={console.log} /> <Switch hasLabel defaultChecked onChange={console.log} /> </Group> ); }

function HasLabel() {
  return (
    <Group>
      <Switch hasLabel onChange={console.log} />
      <Switch hasLabel defaultChecked onChange={console.log} />
    </Group>
  );
}

尺寸

inline

function Size() { return ( <Group> <Switch size="small" onChange={console.log} /> <Switch size="small" defaultChecked onChange={console.log} /> <Switch size="medium" onChange={console.log} /> <Switch size="medium" defaultChecked onChange={console.log} /> </Group> ); }

function Size() {
  return (
    <Group>
      <Switch size="small" onChange={console.log} />
      <Switch size="small" defaultChecked onChange={console.log} />

      <Switch size="medium" onChange={console.log} />
      <Switch size="medium" defaultChecked onChange={console.log} />
    </Group>
  );
}

API

字段	描述
defaultValue	boolean 非受控初值
value	boolean 受控值
hasLabel	boolean 是否显示标签图标
size	"small" | "medium" | "large" 尺寸
style	CSSProperties
disabled	boolean
name	string 所属分组
defaultChecked	boolean 非受控选中初始态
className	string
onChange	FormControlOnChangeHandler<boolean> 选中状态变化时的回调
checked	boolean 受控选中态
defaultIndeterminate	boolean 非受控半选初始态