feat: Form[vertical], close: #2449

components/form/Form.tsx

@@ -14,6 +14,7 @@ export default class Form extends React.Component {
 
   static propTypes = {
     prefixCls: React.PropTypes.string,
+    vertical: React.PropTypes.bool,
     horizontal: React.PropTypes.bool,
     inline: React.PropTypes.bool,
     children: React.PropTypes.any,
@@ -31,9 +32,10 @@ export default class Form extends React.Component {
   }
 
   render() {
-    const { prefixCls, className, inline, horizontal } = this.props;
+    const { prefixCls, className, inline, horizontal, vertical } = this.props;
     const formClassName = classNames({
       [`${prefixCls}-horizontal`]: horizontal,
+      [`${prefixCls}-vertical`]: vertical,
       [`${prefixCls}-inline`]: inline,
       [className]: !!className,
     });
@@ -43,6 +45,7 @@ export default class Form extends React.Component {
       'className',
       'inline',
       'horizontal',
+      'vertical',
       'form',
     ]);
 

components/form/demo/horizontal-form.md

@@ -62,7 +62,7 @@ let Demo = React.createClass({
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label={<span>Sold myself to Hua palace <Tooltip title="I come for Qiu Xiang"><Icon type="question-circle-o" /></Tooltip></span>}
+          label={<span>Sold myself <Tooltip title="I come for Qiu Xiang"><Icon type="question-circle-o" /></Tooltip></span>}
         >
           <Checkbox {...getFieldProps('agreement', { initialValue: false, valuePropName: 'checked' })}>agree</Checkbox>
         </FormItem>

components/form/demo/validate-customized.md

@@ -145,19 +145,12 @@ let Demo = React.createClass({
         validator: this.checkPass2,
       }],
     });
-    const formItemLayout = {
-      labelCol: { span: 6 },
-      wrapperCol: { span: 18 },
-    };
     return (
       <div>
-        <Form horizontal form={this.props.form}>
+        <Form vertical style={{ maxWidth: 600 }} form={this.props.form}>
-          <Row>
+          <Row type="flex" align="middle">
-            <Col span="18">
+            <Col span={12}>
-              <FormItem
+              <FormItem label="Password">
-                {...formItemLayout}
-                label="Password"
-              >
                 <Input {...passProps} type="password"
                   onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                   autoComplete="off" id="pass"
@@ -168,34 +161,24 @@ let Demo = React.createClass({
                 />
               </FormItem>
             </Col>
-            <Col span="6">
+            <Col span={12}>
               {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
             </Col>
           </Row>
-
+          <Row type="flex" align="middle">
-          <Row>
+            <Col span={12}>
-            <Col span="18">
+              <FormItem label="Confirm">
-              <FormItem
-                {...formItemLayout}
-                label="Confirm password"
-              >
                 <Input {...rePassProps} type="password"
                   onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                   autoComplete="off" id="rePass"
                 />
               </FormItem>
             </Col>
-            <Col span="6">
+            <Col span={12}>
               {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
             </Col>
           </Row>
-          <Row>
+          <FormItem><Button type="primary" onClick={this.handleSubmit}>提交</Button></FormItem>
-            <Col span="18">
-              <Col span="18" offset="6">
-                <Button type="primary" onClick={this.handleSubmit}>提交</Button>
-              </Col>
-            </Col>
-          </Row>
         </Form>
       </div>
     );

components/form/index.en-US.md

@@ -37,7 +37,8 @@ A form field is defined using `<Form.Item />`.
 | Property  | Description                              | Type       | Default Value |
 |-----------|------------------------------------------|------------|---------|
 | form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a 
-| horizontal | Use horizontal alignment. | boolean  | false    |
+| vertical | Use vertical layout. | boolean | false |
+| horizontal | Use horizontal layout. | boolean  | false    |
 | inline | Use inline alignment. | boolean | false |
 | onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) |  |
 | prefixCls | Set the CSS class name of form component (optional). | string | 'ant-form' |

components/form/index.zh-CN.md

@@ -39,6 +39,7 @@ english: Form
 | 参数      | 说明                                     | 类型       | 默认值 |
 |-----------|------------------------------------------|------------|-------|
 | form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
+| vertical | 垂直排列布局 | boolean | false |
 | horizontal | 水平排列布局 | boolean  | false    |
 | inline | 行内排列布局 | boolean | false |
 | onSubmit | 数据验证成功后回调事件 | Function(e:Event) |  |

components/form/style/index.less

@@ -226,6 +226,18 @@ form {
   }
 }
 
+// Form layout
+//== Vertical Form
+.@{form-prefix-cls}-vertical {
+  .@{form-prefix-cls}-item-label {
+    padding: 0 0 8px;
+
+    label:after {
+      content: '';
+    }
+  }
+}
+
 //== Inline Form
 .@{form-prefix-cls}-inline {
   .@{form-prefix-cls}-item {