mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
fix checkbox and radio
This commit is contained in:
parent
8fc45043c7
commit
0e9335246c
@ -14,6 +14,7 @@ function onChange(e) {
|
||||
}
|
||||
|
||||
React.render(<label>
|
||||
<Checkbox defaultChecked={false} onChange={onChange} /> Checkbox
|
||||
<Checkbox defaultChecked={false} onChange={onChange} />
|
||||
Checkbox
|
||||
</label>, container);
|
||||
````
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -10,6 +10,6 @@
|
||||
var Radio = antd.Radio;
|
||||
|
||||
React.render(<label>
|
||||
<Radio /> Radio
|
||||
<Radio />Radio
|
||||
</label>, document.getElementById('components-radio-demo-basic'));
|
||||
````
|
||||
|
@ -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
|
||||
|
@ -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}}>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user