mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 11:40:04 +08:00
remove ant-form-item-compact, rewrite form-item align style
This commit is contained in:
parent
7e187485ea
commit
0265e3eb6e
@ -80,34 +80,11 @@ class FormItem extends React.Component {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
// 判断是否要 `.ant-form-item-compact` 样式类
|
|
||||||
_isCompact(children) {
|
|
||||||
const compactControls = ['checkbox', 'radio', 'radio-group', 'static', 'file'];
|
|
||||||
let isCompact = false;
|
|
||||||
|
|
||||||
const childrenArray = Array.isArray(children) ? children : [children];
|
|
||||||
childrenArray.map((child) => {
|
|
||||||
const type = child.props && child.props.type;
|
|
||||||
let prefixCls = child.props && child.props.prefixCls;
|
|
||||||
prefixCls = prefixCls ? prefixCls.substring(prefixCls.indexOf('-') + 1) : '';
|
|
||||||
|
|
||||||
if ((type && compactControls.indexOf(type) > -1) ||
|
|
||||||
(prefixCls && compactControls.indexOf(prefixCls) > -1)) {
|
|
||||||
isCompact = true;
|
|
||||||
} else if (child.props && typeof child.props.children === 'object') {
|
|
||||||
isCompact = this._isCompact(child.props.children);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return isCompact;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderFormItem(children) {
|
renderFormItem(children) {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
const prefixCls = props.prefixCls;
|
const prefixCls = props.prefixCls;
|
||||||
const itemClassName = {
|
const itemClassName = {
|
||||||
[`${prefixCls}-item`]: true,
|
[`${prefixCls}-item`]: true,
|
||||||
[`${prefixCls}-item-compact`]: this._isCompact(props.children),
|
|
||||||
[`${prefixCls}-item-with-help`]: !!props.help,
|
[`${prefixCls}-item-with-help`]: !!props.help,
|
||||||
[`${props.className}`]: !!props.className,
|
[`${props.className}`]: !!props.className,
|
||||||
};
|
};
|
||||||
|
@ -7,10 +7,12 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
````jsx
|
````jsx
|
||||||
import { Form, Select, InputNumber, DatePicker, Switch,
|
import { Form, Select, InputNumber, DatePicker, Switch, Radio,
|
||||||
Slider, Button, message, Row, Col, Upload, Icon } from 'antd';
|
Slider, Button, message, Row, Col, Upload, Icon } from 'antd';
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
const Option = Select.Option;
|
const Option = Select.Option;
|
||||||
|
const RadioButton = Radio.Button;
|
||||||
|
const RadioGroup = Radio.Group;
|
||||||
|
|
||||||
const Demo = React.createClass({
|
const Demo = React.createClass({
|
||||||
mixins: [Form.ValueMixin],
|
mixins: [Form.ValueMixin],
|
||||||
@ -117,18 +119,29 @@ const Demo = React.createClass({
|
|||||||
<DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
|
<DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
|
||||||
</Col>
|
</Col>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem
|
||||||
|
label="选项:"
|
||||||
|
labelCol={{span: 8}}>
|
||||||
|
<RadioGroup defaultValue="a" size="large">
|
||||||
|
<RadioButton value="a">选项一</RadioButton>
|
||||||
|
<RadioButton value="b">选项二</RadioButton>
|
||||||
|
<RadioButton value="c">选项三</RadioButton>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label="logo图:"
|
label="logo图:"
|
||||||
labelCol={{span: 8}}
|
labelCol={{span: 8}}
|
||||||
wrapperCol={{span: 16}}
|
wrapperCol={{span: 16}}
|
||||||
help="提示信息要长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长">
|
help="提示信息要长长长长长长长长长长长长长长">
|
||||||
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
|
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
|
||||||
<Button type="ghost">
|
<Button type="ghost">
|
||||||
<Icon type="upload" /> 点击上传
|
<Icon type="upload" /> 点击上传
|
||||||
</Button>
|
</Button>
|
||||||
</Upload>
|
</Upload>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<Row>
|
<Row style={{marginTop: 24}}>
|
||||||
<Col span="16" offset="8">
|
<Col span="16" offset="8">
|
||||||
<Button type="primary" htmlType="submit">确定</Button>
|
<Button type="primary" htmlType="submit">确定</Button>
|
||||||
</Col>
|
</Col>
|
||||||
|
@ -72,7 +72,6 @@ input[type="checkbox"] {
|
|||||||
color: #666;
|
color: #666;
|
||||||
|
|
||||||
&-control {
|
&-control {
|
||||||
min-height: 32px;
|
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -84,6 +83,8 @@ input[type="checkbox"] {
|
|||||||
color: @label-color;
|
color: @label-color;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
padding-top: 7px;
|
||||||
|
padding-bottom: 7px;
|
||||||
|
|
||||||
&:lang(en) {
|
&:lang(en) {
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
@ -95,6 +96,11 @@ input[type="checkbox"] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{css-prefix}form-explain {
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.@{css-prefix}form-text {
|
.@{css-prefix}form-text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
@ -151,11 +157,6 @@ form {
|
|||||||
.@{css-prefix}checkbox-vertical,
|
.@{css-prefix}checkbox-vertical,
|
||||||
.@{css-prefix}radio-vertical {
|
.@{css-prefix}radio-vertical {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 16px;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{input-number-prefix-cls} {
|
.@{input-number-prefix-cls} {
|
||||||
@ -230,15 +231,6 @@ form {
|
|||||||
.make-row;
|
.make-row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{css-prefix}form-item-compact {
|
|
||||||
label,
|
|
||||||
.@{css-prefix}form-text,
|
|
||||||
.@{css-prefix}form-split {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{css-prefix}radio-inline,
|
.@{css-prefix}radio-inline,
|
||||||
.@{css-prefix}checkbox-inline {
|
.@{css-prefix}checkbox-inline {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
@ -277,10 +269,9 @@ form {
|
|||||||
.@{css-prefix}form-horizontal,
|
.@{css-prefix}form-horizontal,
|
||||||
.@{css-prefix}form-inline {
|
.@{css-prefix}form-inline {
|
||||||
label {
|
label {
|
||||||
line-height: 32px;
|
|
||||||
> input[type="radio"],
|
> input[type="radio"],
|
||||||
> input[type="checkbox"] {
|
> input[type="checkbox"] {
|
||||||
margin-right: 5px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user