Element-React Switch 開(kāi)關(guān)

表示兩種相互對(duì)立的狀態(tài)間的切換，多用于觸發(fā)「開(kāi)/關(guān)」。

基本用法

綁定value到一個(gè)Boolean類(lèi)型的變量。可以使用onText屬性與offText屬性來(lái)設(shè)置開(kāi)關(guān)的文字描述，使用onColor屬性與offColor屬性來(lái)設(shè)置開(kāi)關(guān)的背景色。

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

擴(kuò)展的 value 類(lèi)型

設(shè)置onValue和offValue屬性，接受Boolean, String或Number類(lèi)型的值。

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

禁用狀態(tài)

設(shè)置disabled屬性，接受一個(gè)Boolean，設(shè)置true即可禁用。

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

焦點(diǎn)

設(shè)置allowFocus屬性，接受一個(gè)Boolean，設(shè)置true即可激活。

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

Attributes

Events