Element-React Switch 开关

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

基本用法

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

Element-React Switch 开关

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

扩展的 value 类型

设置onValueoffValue属性,接受Boolean, StringNumber类型的值。
Element-React Switch 开关

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即可禁用。

Element-React Switch 开关

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

焦点

设置allowFocus属性,接受一个Boolean,设置true即可激活。
Element-React Switch 开关

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

Attributes

参数说明类型可选值默认值
disabled是否禁用booleanfalse
widthswitch 的宽度(像素)number58(有文字)/ 46(无文字)
onIconClassswitch 打开时所显示图标的类名, 设置此项会忽略 onTextstring
offIconClassswitch 关闭时所显示图标的类名, 设置此项会忽略 offTextstring
onTextswitch 打开时的文字stringON
offTextswitch 关闭时的文字stringOFF
onValueswitch 打开时的值boolean / string / numbertrue
offValueswitch 关闭时的值boolean / string / numberfalse
onColorswitch 打开时的背景色string#20A0FF
offColorswitch 关闭时的背景色string#C0CCDA
nameswitch 对应的 name 属性string
allowFocus允许 switch 触发 focus 和 blur 事件booleanboolean

Events

事件名称说明回调参数
onChangeswitch 状态发生变化时的回调函数value
onBlurswitch 失去焦点时触发,仅当 allow-focus 为 true 时生效event: Event
onFocusswitch 获得焦点时触发,仅当 allow-focus 为 true 时生效event: Event

作者:冒牌SEO,如若转载,请注明出处:https://www.web176.com/elementreact/19999.html

(0)
打赏 支付宝 支付宝 微信 微信
冒牌SEO冒牌SEO
上一篇 2023年5月11日
下一篇 2023年5月11日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注