mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
Hide useless prop Form[horizontal]
This commit is contained in:
parent
53371dfe3e
commit
657c707a79
@ -68,7 +68,6 @@ class AdvancedSearchForm extends React.Component {
|
|||||||
const shownCount = expand ? children.length : 6;
|
const shownCount = expand ? children.length : 6;
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
horizontal
|
|
||||||
className="ant-advanced-search-form"
|
className="ant-advanced-search-form"
|
||||||
onSubmit={this.handleSearch}
|
onSubmit={this.handleSearch}
|
||||||
>
|
>
|
||||||
@ -111,7 +110,7 @@ ReactDOM.render(
|
|||||||
````
|
````
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#components-form-demo-advanced-search .ant-form-horizontal {
|
#components-form-demo-advanced-search .ant-form {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
#components-form-demo-advanced-search .search-result-list {
|
#components-form-demo-advanced-search .search-result-list {
|
||||||
|
@ -101,7 +101,7 @@ class DynamicFieldSet extends React.Component {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<Form onSubmit={this.handleSubmit} horizontal>
|
<Form onSubmit={this.handleSubmit}>
|
||||||
{formItems}
|
{formItems}
|
||||||
<FormItem {...formItemLayoutWithOutLabel}>
|
<FormItem {...formItemLayoutWithOutLabel}>
|
||||||
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
|
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
|
||||||
|
@ -95,7 +95,7 @@ const RegistrationForm = Form.create()(React.createClass({
|
|||||||
</Select>
|
</Select>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<Form horizontal onSubmit={this.handleSubmit}>
|
<Form onSubmit={this.handleSubmit}>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="E-mail"
|
label="E-mail"
|
||||||
|
@ -59,7 +59,7 @@ const TimeRelatedForm = Form.create()(React.createClass({
|
|||||||
rules: [{ type: 'array', required: true, message: 'Please select time!' }],
|
rules: [{ type: 'array', required: true, message: 'Please select time!' }],
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<Form horizontal onSubmit={this.handleSubmit}>
|
<Form onSubmit={this.handleSubmit}>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="DatePicker"
|
label="DatePicker"
|
||||||
|
@ -30,7 +30,7 @@ import { Form, Input, DatePicker, Col } from 'antd';
|
|||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Form horizontal>
|
<Form>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="Fail"
|
label="Fail"
|
||||||
labelCol={{ span: 5 }}
|
labelCol={{ span: 5 }}
|
||||||
|
@ -54,7 +54,7 @@ class RawForm extends React.Component {
|
|||||||
const number = this.state.number;
|
const number = this.state.number;
|
||||||
const tips = 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
|
const tips = 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
|
||||||
return (
|
return (
|
||||||
<Form horizontal>
|
<Form>
|
||||||
<FormItem
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="Prime between 8 & 12"
|
label="Prime between 8 & 12"
|
||||||
|
@ -11,7 +11,7 @@ Form is used to collect, validate, and submit the user input, usually contains v
|
|||||||
|
|
||||||
You can align the controls of a `form` using one of the following attributes:
|
You can align the controls of a `form` using one of the following attributes:
|
||||||
|
|
||||||
- `horizontal`:to horizontally align the `label`s and controls of the fields.
|
- `horizontal`:to horizontally align the `label`s and controls of the fields. (Default)
|
||||||
- `vertical`:to vertically align the `label`s and controls of the fields.
|
- `vertical`:to vertically align the `label`s and controls of the fields.
|
||||||
- `inline`:to render form fields in one line.
|
- `inline`:to render form fields in one line.
|
||||||
|
|
||||||
@ -38,7 +38,6 @@ A form field is defined using `<Form.Item />`.
|
|||||||
|-----------|------------------------------------------|------------|---------|
|
|-----------|------------------------------------------|------------|---------|
|
||||||
| 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
|
| 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
|
||||||
| vertical | Use vertical layout. | boolean | false |
|
| vertical | Use vertical layout. | boolean | false |
|
||||||
| horizontal | Use horizontal layout. | boolean | false |
|
|
||||||
| inline | Use inline alignment. | boolean | false |
|
| inline | Use inline alignment. | boolean | false |
|
||||||
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
|
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
|
||||||
|
|
||||||
@ -118,7 +117,7 @@ Note:
|
|||||||
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
|
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.code-box-demo .ant-form-horizontal {
|
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||||||
max-width: 540px;
|
max-width: 540px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -12,7 +12,7 @@ title: Form
|
|||||||
|
|
||||||
我们为 `form` 提供了以下两种排列方式:
|
我们为 `form` 提供了以下两种排列方式:
|
||||||
|
|
||||||
- 水平排列:标签和表单控件水平排列;
|
- 水平排列:标签和表单控件水平排列;(默认)
|
||||||
- 水质排列:标签和表单控件上下垂直排列;
|
- 水质排列:标签和表单控件上下垂直排列;
|
||||||
- 行内排列:表单项水平行内排列。
|
- 行内排列:表单项水平行内排列。
|
||||||
|
|
||||||
@ -40,7 +40,6 @@ title: Form
|
|||||||
|-----------|------------------------------------------|------------|-------|
|
|-----------|------------------------------------------|------------|-------|
|
||||||
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性,直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
|
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性,直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
|
||||||
| vertical | 垂直排列布局 | boolean | false |
|
| vertical | 垂直排列布局 | boolean | false |
|
||||||
| horizontal | 水平排列布局 | boolean | false |
|
|
||||||
| inline | 行内排列布局 | boolean | false |
|
| inline | 行内排列布局 | boolean | false |
|
||||||
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
|
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
|
||||||
|
|
||||||
@ -119,7 +118,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
|
|||||||
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false |
|
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false |
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.code-box-demo .ant-form-horizontal {
|
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||||||
max-width: 540px;
|
max-width: 540px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -235,19 +235,6 @@ form {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Form layout
|
|
||||||
//== Horizontal Form
|
|
||||||
.@{form-prefix-cls}-horizontal {
|
|
||||||
.@{form-prefix-cls}-item {
|
|
||||||
.make-row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{ant-prefix}-radio-inline,
|
|
||||||
.@{ant-prefix}-checkbox-inline {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form layout
|
// Form layout
|
||||||
//== Vertical Form
|
//== Vertical Form
|
||||||
.@{form-prefix-cls}-vertical {
|
.@{form-prefix-cls}-vertical {
|
||||||
@ -293,16 +280,6 @@ form {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{form-prefix-cls}-horizontal,
|
|
||||||
.@{form-prefix-cls}-inline {
|
|
||||||
label {
|
|
||||||
> input[type="radio"],
|
|
||||||
> input[type="checkbox"] {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validation state
|
// Validation state
|
||||||
.has-success,
|
.has-success,
|
||||||
.has-warning,
|
.has-warning,
|
||||||
|
Loading…
Reference in New Issue
Block a user