element ui switch开关 Element-React Switch 开关

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

基本用法

绑定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 类型

设置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>
  )
}

禁用状态

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

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

焦点

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

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

Attributes

Events