fix checkbox and radio

This commit is contained in:
afc163 2015-07-17 11:06:38 +08:00
parent 8fc45043c7
commit 0e9335246c
9 changed files with 42 additions and 30 deletions

View File

@ -14,6 +14,7 @@ function onChange(e) {
}
React.render(<label>
<Checkbox defaultChecked={false} onChange={onChange} /> Checkbox
<Checkbox defaultChecked={false} onChange={onChange} />
Checkbox
</label>, container);
````

View File

@ -25,7 +25,8 @@ var App = React.createClass({
<label>
<Checkbox checked={this.state.checked}
disabled={this.state.disabled}
onChange={this.onChange} /> {label}
onChange={this.onChange} />
{label}
</label>
</p>
<p>

View File

@ -102,13 +102,13 @@ React.render(
<label for="" className="col-6" required>ant-radio:</label>
<div className="col-16">
<label className="ant-radio-inline">
<Radio name="radio" /> 选项一
<Radio name="radio" />选项一
</label>
<label className="ant-radio-inline">
<Radio name="radio" /> 选项二
<Radio name="radio" />选项二
</label>
<label className="ant-radio-inline">
<Radio name="radio" /> 选项三
<Radio name="radio" />选项三
</label>
</div>
</div>
@ -116,13 +116,13 @@ React.render(
<label for="" className="col-6" required>ant-checkbox:</label>
<div className="col-16">
<label className="ant-checkbox-inline">
<Checkbox /> 选项一
<Checkbox />选项一
</label>
<label className="ant-checkbox-inline">
<Checkbox /> 选项二
<Checkbox />选项二
</label>
<label className="ant-checkbox-inline">
<Checkbox /> 选项三
<Checkbox />选项三
</label>
</div>
</div>

View File

@ -10,6 +10,6 @@
var Radio = antd.Radio;
React.render(<label>
<Radio /> Radio
<Radio />Radio
</label>, document.getElementById('components-radio-demo-basic'));
````

View File

@ -26,9 +26,9 @@ var App = React.createClass({
},
render() {
return <div>
<Radio defaultChecked={false} disabled={this.state.disabled} /> 不可用
<Radio defaultChecked={false} disabled={this.state.disabled} />不可用
<br />
<Radio defaultChecked={true} disabled={this.state.disabled} /> 不可用
<Radio defaultChecked={true} disabled={this.state.disabled} />不可用
<div style={{"margin-top": 20}}>
<button className="ant-btn ant-btn-primary" onClick={this.toggleDisabled}>
Toggle disabled

View File

@ -24,25 +24,29 @@ var RadioGroup = React.createClass({
<label>
<Radio value="a"
checked={this.state.value === 'a'}
onChange={this.handleChange} /> A
onChange={this.handleChange} />
A
</label>
<br/>
<label>
<Radio value="b"
checked={this.state.value === 'b'}
onChange={this.handleChange} /> B
onChange={this.handleChange} />
B
</label>
<br/>
<label>
<Radio value="c"
checked={this.state.value === 'c'}
onChange={this.handleChange} /> C
onChange={this.handleChange} />
C
</label>
<br/>
<label>
<Radio value="d"
checked={this.state.value === 'd'}
onChange={this.handleChange} /> D
onChange={this.handleChange} />
D
</label>
</p>
<p style={{"margin-top": 20}}>

View File

@ -1,8 +1,8 @@
@checkboxWarpPrefixCls: ant-checkbox;
@checkboxInnerPrefixCls: ~"@{checkboxWarpPrefixCls}-inner";
@checkboxWrapPrefixCls: ant-checkbox;
@checkboxInnerPrefixCls: ~"@{checkboxWrapPrefixCls}-inner";
/* 一般状态 */
.@{checkboxWarpPrefixCls} {
.@{checkboxWrapPrefixCls} {
white-space: nowrap;
cursor: pointer;
outline: none;
@ -62,7 +62,7 @@
}
/* 选中状态 */
.@{checkboxWarpPrefixCls}-checked {
.@{checkboxWrapPrefixCls}-checked {
&:hover {
.@{checkboxInnerPrefixCls} {
@ -93,9 +93,9 @@
}
}
.@{checkboxWarpPrefixCls}-disabled {
.@{checkboxWrapPrefixCls}-disabled {
&.@{checkboxWarpPrefixCls}-checked {
&.@{checkboxWrapPrefixCls}-checked {
&:hover {
.@{checkboxInnerPrefixCls} {
@ -133,3 +133,7 @@
cursor: default;
}
}
.@{checkboxWrapPrefixCls} + span {
margin-left: 8px;
}

View File

@ -163,10 +163,8 @@ input[type="checkbox"] {
padding-top: 7px;
padding-bottom: 7px;
> input[type="radio"],
> input[type="checkbox"],
> .@{css-prefix}checkbox,
> .@{css-prefix}radio {
margin-right: 3px;
> input[type="checkbox"] {
margin-right: 5px;
}
}
}

View File

@ -1,9 +1,9 @@
@radioWarpPrefixCls: ant-radio;
@radioInnerPrefixCls: ~"@{radioWarpPrefixCls}-inner";
@radioWrapPrefixCls: ant-radio;
@radioInnerPrefixCls: ~"@{radioWrapPrefixCls}-inner";
@radioDuration: .3s;
/* 一般状态 */
.@{radioWarpPrefixCls} {
.@{radioWrapPrefixCls} {
white-space: nowrap;
outline: none;
display: inline-block;
@ -60,7 +60,7 @@
}
/* 选中状态 */
.@{radioWarpPrefixCls}-checked {
.@{radioWrapPrefixCls}-checked {
.@{radioInnerPrefixCls} {
border-color: #d9d9d9;
@ -72,7 +72,7 @@
}
}
.@{radioWarpPrefixCls}-disabled {
.@{radioWrapPrefixCls}-disabled {
&:hover {
.@{radioInnerPrefixCls} {
border-color: #d9d9d9;
@ -90,3 +90,7 @@
cursor: default;
}
}
.@{radioWrapPrefixCls} + span {
margin-left: 8px;
}