codecamp

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>
React EasyUI 分割按钮
React EasyUI 按钮组
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

React EasyUI 教程总览

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }