React EasyUI 开关按钮
开关按钮( switchbutton )用于form
表单。
开关按钮( switchbutton )有两个状态:“开”与“关”。用户可以点击或轻击来切换,标签状态可定义。
属性列表
名称 | 数据类型 | 作用描述 | 默认值 |
---|---|---|---|
value | boolean | 绑定到按钮的值。 | null |
onText | string | 按钮状态为on时的文本值。 | ON |
offText | string | 按钮关闭状态时的文本值。 | OFF |
handleText | string | 中心句柄的文本值。 | null |
disabled | boolean | 是否为禁用按钮。 | false |
readonly | boolean | 按钮是否只读。 | false |
inputId | string | 输入框的id属性值。 | null |
注意:
- 继承: FieldBase 。
使用方法
<div style={{ marginBottom: 20 }}>
<Label htmlFor="s1" style={{ width: 150 }}>Receive mail:</Label>
<SwitchButton inputId="s1" value={received} onChange={(value) => this.setState({ received: value })}></SwitchButton>
</div>
<div style={{ marginBottom: 20 }}>
<Label htmlFor="s2" style={{ width: 150 }}>Shared network:</Label>
<SwitchButton inputId="s2" value={shared} onChange={(value) => this.setState({ shared: value })}></SwitchButton>
</div>
<div style={{ marginBottom: 20 }}>
<Label htmlFor="s3" style={{ width: 150 }}>Subscribed:</Label>
<SwitchButton inputId="s3" value={subscribed} onChange={(value) => this.setState({ subscribed: value })}></SwitchButton>
</div>