test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

feat: make Form.Item work with responsive layout, ref: #5296 (#5306)

Browse Source
This commit is contained in:
Benjy Cui 2017-03-15 11:25:58 +08:00 committed by 偏右
parent 4579d8c419
commit aa4606cd9f
6 changed files with 141 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -388,7 +388,7 @@ exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`]
<div
class="ant-row ant-form-item">
<div
class="ant-col-20 ant-col-offset-4 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4">
<div
class="ant-form-item-control ">
<button
@ -407,7 +407,7 @@ exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`]
<div
class="ant-row ant-form-item">
<div
class="ant-col-20 ant-col-offset-4 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4">
<div
class="ant-form-item-control ">
<button
@ -777,7 +777,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
<div
class="ant-row ant-form-item">
<div
class="ant-col-6 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
<label
class="ant-form-item-required"
for="email"
@ -786,7 +786,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
</label>
</div>
<div
class="ant-col-14 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
<div
class="ant-form-item-control ">
<input
@ -801,7 +801,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
<div
class="ant-row ant-form-item">
<div
class="ant-col-6 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
<label
class="ant-form-item-required"
for="password"
@ -810,7 +810,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
</label>
</div>
<div
class="ant-col-14 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
<div
class="ant-form-item-control ">
<input
@ -825,7 +825,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
<div
class="ant-row ant-form-item">
<div
class="ant-col-6 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
<label
class="ant-form-item-required"
for="confirm"
@ -834,7 +834,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
</label>
</div>
<div
class="ant-col-14 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
<div
class="ant-form-item-control ">
<input
@ -849,7 +849,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
<div
class="ant-row ant-form-item">
<div
class="ant-col-6 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
<label
class="ant-form-item-required"
for="nickname"
@ -862,7 +862,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
</label>
</div>
<div
class="ant-col-14 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
<div
class="ant-form-item-control ">
<input
@ -877,7 +877,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
<div
class="ant-row ant-form-item">
<div
class="ant-col-6 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
<label
class="ant-form-item-required"
for="residence"
@ -886,7 +886,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
</label>
</div>
<div
class="ant-col-14 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
<div
class="ant-form-item-control has-success">
<span
@ -915,7 +915,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
<div
class="ant-row ant-form-item">
<div
class="ant-col-6 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
<label
class="ant-form-item-required"
for="phone"
@ -924,7 +924,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
</label>
</div>
<div
class="ant-col-14 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
<div
class="ant-form-item-control ">
<span
@ -972,7 +972,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
<div
class="ant-row ant-form-item">
<div
class="ant-col-6 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
<label
class="ant-form-item-required"
for="captcha"
@ -981,7 +981,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
</label>
</div>
<div
class="ant-col-14 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
<div
class="ant-form-item-control ">
<div
@ -1020,7 +1020,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
class="ant-row ant-form-item"
style="margin-bottom:8px;">
<div
class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-14 ant-col-sm-offset-6">
<div
class="ant-form-item-control ">
<label
@ -1046,7 +1046,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
<div
class="ant-row ant-form-item">
<div
class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-14 ant-col-sm-offset-6">
<div
class="ant-form-item-control ">
<button
@ -1068,7 +1068,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
<div
class="ant-row ant-form-item">
<div
class="ant-col-8 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
<label
class="ant-form-item-required"
for="date-picker"
@ -1077,7 +1077,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
</label>
</div>
<div
class="ant-col-16 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
<div
class="ant-form-item-control ">
<span
@ -1098,7 +1098,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
<div
class="ant-row ant-form-item">
<div
class="ant-col-8 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
<label
class="ant-form-item-required"
for="date-time-picker"
@ -1107,7 +1107,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
</label>
</div>
<div
class="ant-col-16 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
<div
class="ant-form-item-control ">
<span
@ -1129,7 +1129,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
<div
class="ant-row ant-form-item">
<div
class="ant-col-8 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
<label
class="ant-form-item-required"
for="month-picker"
@ -1138,7 +1138,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
</label>
</div>
<div
class="ant-col-16 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
<div
class="ant-form-item-control ">
<span
@ -1159,7 +1159,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
<div
class="ant-row ant-form-item">
<div
class="ant-col-8 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
<label
class="ant-form-item-required"
for="range-picker"
@ -1168,7 +1168,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
</label>
</div>
<div
class="ant-col-16 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
<div
class="ant-form-item-control ">
<span
@ -1199,7 +1199,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
<div
class="ant-row ant-form-item">
<div
class="ant-col-8 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
<label
class="ant-form-item-required"
for="range-time-picker"
@ -1208,7 +1208,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
</label>
</div>
<div
class="ant-col-16 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
<div
class="ant-form-item-control ">
<span
@ -1240,7 +1240,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
<div
class="ant-row ant-form-item">
<div
class="ant-col-8 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
<label
class="ant-form-item-required"
for="time-picker"
@ -1249,7 +1249,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
</label>
</div>
<div
class="ant-col-16 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
<div
class="ant-form-item-control ">
<span
@ -1269,7 +1269,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
<div
class="ant-row ant-form-item">
<div
class="ant-col-16 ant-col-offset-8 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8">
<div
class="ant-form-item-control ">
<button
@ -1748,7 +1748,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
<div
class="ant-row ant-form-item ant-form-item-with-help">
<div
class="ant-col-5 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
<label
class=""
title="Fail">
@ -1756,7 +1756,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
</label>
</div>
<div
class="ant-col-12 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
<div
class="ant-form-item-control has-error">
<input
@ -1774,7 +1774,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
<div
class="ant-row ant-form-item">
<div
class="ant-col-5 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
<label
class=""
title="Warning">
@ -1782,7 +1782,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
</label>
</div>
<div
class="ant-col-12 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
<div
class="ant-form-item-control has-warning">
<input
@ -1796,7 +1796,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
<div
class="ant-row ant-form-item ant-form-item-with-help">
<div
class="ant-col-5 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
<label
class=""
title="Validating">
@ -1804,7 +1804,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
</label>
</div>
<div
class="ant-col-12 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
<div
class="ant-form-item-control has-feedback is-validating">
<input
@ -1822,7 +1822,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
<div
class="ant-row ant-form-item">
<div
class="ant-col-5 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
<label
class=""
title="Success">
@ -1830,7 +1830,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
</label>
</div>
<div
class="ant-col-12 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
<div
class="ant-form-item-control has-feedback has-success">
<input
@ -1844,7 +1844,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
<div
class="ant-row ant-form-item">
<div
class="ant-col-5 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
<label
class=""
title="Warning">
@ -1852,7 +1852,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
</label>
</div>
<div
class="ant-col-12 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
<div
class="ant-form-item-control has-feedback has-warning">
<input
@ -1866,7 +1866,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
<div
class="ant-row ant-form-item ant-form-item-with-help">
<div
class="ant-col-5 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
<label
class=""
title="Fail">
@ -1874,7 +1874,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
</label>
</div>
<div
class="ant-col-12 ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
<div
class="ant-form-item-control has-feedback has-error">
<input
@ -1892,7 +1892,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
<div
class="ant-row ant-form-item ant-form-item-with-help">
<div
class="ant-col-5 ant-form-item-label">
class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
<label
class=""
title="inline">
@ -1900,7 +1900,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
</label>
</div>
<div
class="ant-form-item-control-wrapper">
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-19">
<div
class="ant-form-item-control ">
<div

15
components/form/demo/dynamic-form-item.md
View File

@ -59,11 +59,20 @@ class DynamicFieldSet extends React.Component {
render() {
const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
};
const formItemLayoutWithOutLabel = {
wrapperCol: { span: 20, offset: 4 },
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 4 },
},
};
getFieldDecorator('keys', { initialValue: [] });
const keys = getFieldValue('keys');

20
components/form/demo/register.md
View File

@ -76,13 +76,25 @@ class RegistrationForm extends React.Component {
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 },
},
};
const tailFormItemLayout = {
wrapperCol: {
span: 14,
offset: 6,
xs: {
span: 24,
offset: 0,
},
sm: {
span: 14,
offset: 6,
},
},
};
const prefixSelector = getFieldDecorator('prefix', {

15
components/form/demo/time-related-controls.md
View File

@ -49,8 +49,14 @@ class TimeRelatedForm extends React.Component {
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
const config = {
rules: [{ type: 'object', required: true, message: 'Please select time!' }],
@ -109,7 +115,10 @@ class TimeRelatedForm extends React.Component {
)}
</FormItem>
<FormItem
wrapperCol={{ span: 16, offset: 8 }}
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: { span: 16, offset: 8 },
}}
>
<Button type="primary" htmlType="submit" size="large">Submit</Button>
</FormItem>

38
components/form/demo/validate-static.md
View File

@ -25,12 +25,22 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
import { Form, Input, DatePicker, Col } from 'antd';
const FormItem = Form.Item;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
};
ReactDOM.render(
<Form>
<FormItem
{...formItemLayout}
label="Fail"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="error"
help="Should be combination of numbers & alphabets"
>
@ -38,18 +48,16 @@ ReactDOM.render(
</FormItem>
<FormItem
{...formItemLayout}
label="Warning"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="warning"
>
<Input placeholder="Warning" id="warning" />
</FormItem>
<FormItem
{...formItemLayout}
label="Validating"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="validating"
help="The information is being validated..."
@ -58,9 +66,8 @@ ReactDOM.render(
</FormItem>
<FormItem
{...formItemLayout}
label="Success"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="success"
>
@ -68,9 +75,8 @@ ReactDOM.render(
</FormItem>
<FormItem
{...formItemLayout}
label="Warning"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="warning"
>
@ -78,9 +84,8 @@ ReactDOM.render(
</FormItem>
<FormItem
{...formItemLayout}
label="Fail"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="error"
help="Should be combination of numbers & alphabets"
@ -90,7 +95,14 @@ ReactDOM.render(
<FormItem
label="inline"
labelCol={{ span: 5 }}
labelCol={{
xs: { span: 24 },
sm: { span: 5 },
}}
wrapperCol={{
xs: { span: 24 },
sm: { span: 19 },
}}
help
>
<Col span="6">

33
components/form/style/index.less
View File

@ -249,8 +249,7 @@ form {
// Form layout
//== Vertical Form
.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label { // when labelCol is 24, it is a vertical form
.make-vertical-layout() {
padding: 0 0 8px;
display: block;
text-align: left;
@ -259,6 +258,36 @@ form {
content: '';
}
}
.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
// when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
.make-vertical-layout();
}
@media (max-width: @screen-xs-max) {
.@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
.make-vertical-layout();
}
}
@media (max-width: @screen-sm-max) {
.@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
.make-vertical-layout();
}
}
@media (max-width: @screen-md-max) {
.@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
.make-vertical-layout();
}
}
@media (max-width: @screen-lg-max) {
.@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
.make-vertical-layout();
}
}
//== Inline Form
.@{form-prefix-cls}-inline {