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>