face
Write less code, do more things!
markdown
var React = require('react')
var Radio = require('radio.react')
class Basic extends React.Component {
constructor(props){
super(props)
this.state = {
basic: 'a'
}
}
render () {
let self = this
return (
<div className="basicDemo" >
<Radio name="basicDemo"
checked={self.state.basic === 'a'}
onChange={function (e) {
self.setState({
basic: 'a'
})
}}
>radio</Radio>
<Radio name="basicDemo"
checked={self.state.basic === 'b'}
onChange={function (e) {
self.setState({
basic: 'b'
})
}}
>radio</Radio>
<Radio name="basicDemo"
checked={self.state.basic === 'c'}
onChange={function (e) {
self.setState({
basic: 'c'
})
}}
>
radio
<a href="http://github.com/onface" target="_blank" > link </a>
radio
</Radio>
<hr/>
<Radio name="basicDemo"
checked={self.state.disabledChecked}
disabled={true}
>disabled | checked:true</Radio>
<hr/>
<Radio name="basicDemo"
checked={self.state.disabledFalseChecked}
disabled={true}
>disabled | checked: false</Radio>
</div>
)
}
}
module.exports = Basic
markdown
var React = require('react')
var Radio = require('radio.react')
class Before extends React.Component {
constructor(props){
super(props)
}
render () {
let self = this
return (
<div className="beforeDemo" >
<Radio checked={true} >has't before</Radio>
<hr/>
<Radio checked={true} before >true</Radio> <br/>
<Radio checked={true} before disabled={true} >true</Radio>
<hr/>
<Radio checked={true} before={'beforeLabel'} >string</Radio> <br/>
<Radio checked={true} before={'beforeLabel'} disabled={true} >string</Radio> <br/>
<Radio checked={true} before={'beforeLabel'} /> <br/>
<Radio checked={true} before={'beforeLabel'} disabled={true} />
<hr/>
<Radio checked={true} before={(<i>before react ele</i>)} >reactDomEle</Radio> <br/>
<Radio checked={true} before={(<i>before react ele</i>)} disabled={true} >reactDomEle</Radio> <br/>
<Radio checked={true} before={(<i>before react ele</i>)} /> <br/>
<Radio checked={true} before={(<i>before react ele</i>)} disabled={true} />
<hr/>
</div>
)
}
}
module.exports = Before
通过改变包裹的div的font-size来自适应大小。
建议font-size不要小于默认尺寸，因为浏览器对于含小数值px(像素)解析有差异。
var React = require('react')
var Radio = require('radio.react')
class Size extends React.Component {
constructor(props){
super(props)
this.state = {
basic: 'a'
}
}
changeCheck = (e) => {
this.setState({
check: e.target.checked
})
}
render () {
let self = this
return (
<div className="sizeDemo" >
{/* => fontsize: 16px */}
<div>
<Radio checked={self.state.basic === 'a'}
onChange={function (e) {
self.setState({
basic: 'a'
})
}}
>default</Radio>
<Radio checked={self.state.basic === 'b'}
onChange={function (e) {
self.setState({
basic: 'b'
})
}}
>default</Radio>
</div>
<hr/>
<div style={{'fontSize':'32px'}} >
<Radio checked={self.state.basic === 'a'}
onChange={function (e) {
self.setState({
basic: 'a'
})
}}
>large</Radio>
<Radio checked={self.state.basic === 'b'}
onChange={function (e) {
self.setState({
basic: 'b'
})
}}
>large</Radio>
</div>
<hr/>
<div style={{'fontSize':'48px'}} >
<Radio checked={self.state.basic === 'a'}
onChange={function (e) {
self.setState({
basic: 'a'
})
}}
>very large</Radio>
<Radio checked={self.state.basic === 'b'}
onChange={function (e) {
self.setState({
basic: 'b'
})
}}
>very large</Radio>
</div>
</div>
)
}
}
module.exports = Size
themes.demo.less仅加部分代码修改
// from file '/lib/less/settings.less'
@prefix: face-radio;
// set custom color
@face-radio-border-red-color: rgba(210, 20, 60, 1);
@face-radio-shadow-red-color: rgba(210, 20, 60, 0.2);
// from file '/lib/less/extend.less'
.faceRadioStyle(@border, @shadow) {
&.@{prefix}:hover .@{prefix}-switch-icon {
border-color: @border;
box-shadow: inset 0 1px 1px @shadow;
}
&.@{prefix}--checked {
&:hover .@{prefix}-switch-icon ,
.@{prefix}-switch-icon {
background-color: @border;
border-color: @border;
}
}
&.@{prefix}--focus,
&.@{prefix}--focus.@{prefix}--checked {
&:hover .@{prefix}-switch-icon ,
.@{prefix}-switch-icon {
box-shadow: 0 0 0 0.125em @shadow;
}
}
}
// apply custom color
.@{prefix}--themes-red {
.faceRadioStyle(@face-radio-border-red-color, @face-radio-shadow-red-color);
}
var React = require('react')
var Radio = require('radio.react')
// 引入复制后修改样式
import './themes.demo.less';
class MyRadio extends React.Component {
render () {
return (
<Radio themes="red" {...this.props} />
)
}
}
class Themes extends React.Component {
constructor(props){
super(props)
this.state = {
basic: 'a'
}
}
render () {
let self = this
return (
<div className="themesDemo" >
<MyRadio checked={self.state.basic === 'a'}
onChange={function (e) {
self.setState({
basic: 'a'
})
}}
>radio</MyRadio>
<MyRadio checked={self.state.basic === 'b'}
onChange={function (e) {
self.setState({
basic: 'b'
})
}}
>radio</MyRadio>
<hr/>
<MyRadio checked={true}
disabled={true}
>disabled | checked:true</MyRadio>
<hr/>
<MyRadio checked={false}
disabled={true}
>disabled | checked: false</MyRadio>
</div>
)
}
}
module.exports = Themes
color。/* xxx (start) */ demo code /* xxx (end) */复制 lib/index.less 和 lib/less/ 下的文件，修改 border-radius 部分或者其他代码。
配置 prefixClassName。
var React = require('react')
var Radio = require('radio.react')
// 引入复制后修改样式
import './pcls.demo.less/index.less';
class MyRadio extends React.Component {
render () {
return (
<Radio {...this.props} prefixClassName="myradio" />
)
}
}
class Pcls extends React.Component {
constructor(props){
super(props)
this.state = {
basic: 'a'
}
}
render () {
let self = this
return (
<div className="themesDemo" >
<MyRadio checked={self.state.basic === 'a'}
onChange={function (e) {
self.setState({
basic: 'a'
})
}}
>radio</MyRadio>
<MyRadio checked={self.state.basic === 'b'}
onChange={function (e) {
self.setState({
basic: 'b'
})
}}
>radio</MyRadio>
<hr/>
<MyRadio checked={self.state.disabledChecked}
disabled={true}
>disabled | checked:true</MyRadio>
<hr/>
<MyRadio checked={self.state.disabledFalseChecked}
disabled={true}
>disabled | checked: false</MyRadio>
</div>
)
}
}
module.exports = Pcls