Switch 开关

Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

基本用法

:::demo 绑定value到一个Boolean类型的变量。可以使用onText属性与offText属性来设置开关的文字描述，使用onColor属性与offColor属性来设置开关的背景色。

render() {
  return (
    <div>
      <Switch
        value={true}
        onText=""
        offText="">
      </Switch>
      <Switch
        value={true}
        onColor="#13ce66"
        offColor="#ff4949">
      </Switch>
    </div>
  )
}

:::

扩展的 value 类型

:::demo 设置onValue和offValue属性，接受Boolean, String或Number类型的值。

constructor(props) {
  super(props);

  this.state = {
    value: 100,
  }
}

render() {
  return (
    <Tooltip
      placement="top"
      content={
        <div>Switch value: {this.state.value}</div>
      }
    >
      <Switch
        value={this.state.value}
        onColor="#13ce66"
        offColor="#ff4949"
        onValue={100}
        offValue={0}
        onChange={(value)=>{this.setState({value: value})}}
       >
      </Switch>
    </Tooltip>
  )
}

:::

禁用状态

:::demo 设置disabled属性，接受一个Boolean，设置true即可禁用。

render() {
  return (
    <div>
      <Switch
        value={true}
        onText=""
        offText=""
        disabled>
      </Switch>
      <Switch
        value={true}
        disabled>
      </Switch>
    </div>
  )
}

:::

焦点

:::demo 设置allowFocus属性，接受一个Boolean，设置true即可激活。

render() {
  return (
    <div>
      <Switch
        allowFocus={true}
        onFocus={()=>console.log('focus')}
        onBlur={()=>console.log('blur')}
        >
      </Switch>
    </div>
  )
}

:::

Attributes

Events