mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 11:40:04 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix: should support Input[addon] in Form[inline], close: #3524

Browse Source
This commit is contained in:
Benjy Cui 2016-10-21 15:04:55 +08:00
parent af3c1aac96
commit 1ed434a695
3 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/form/demo/inline-form.md
View File

@ -14,7 +14,7 @@ title:
Inline form is often used for login. Inline form is often used for login.
````jsx ````jsx
import { Form, Input, Button, Checkbox } from 'antd'; import { Form, Icon, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item; const FormItem = Form.Item;
let Demo = React.createClass({ let Demo = React.createClass({
@ -27,26 +27,22 @@ let Demo = React.createClass({
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
return ( return (
<Form inline onSubmit={this.handleSubmit}> <Form inline onSubmit={this.handleSubmit}>
<FormItem <FormItem>
label="Account"
>
{getFieldDecorator('userName')( {getFieldDecorator('userName')(
<Input placeholder="Please input the account" /> <Input addonBefore={<Icon type="user" />} placeholder="Please input the account" />
)} )}
</FormItem> </FormItem>
<FormItem <FormItem>
label="Password"
>
{getFieldDecorator('password')( {getFieldDecorator('password')(
<Input type="password" placeholder="Please input the password" /> <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Please input the password" />
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
{getFieldDecorator('agreement')( {getFieldDecorator('agreement')(
<Checkbox>Remember me</Checkbox> <Checkbox>Remember me</Checkbox>
)} )}
</FormItem>
<Button type="primary" htmlType="submit">Submit</Button> <Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form> </Form>
); );
}, },

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

@ -62,6 +62,7 @@ input[type="checkbox"] {
font-size: @font-size-base; font-size: @font-size-base;
margin-bottom: @form-item-margin-bottom; margin-bottom: @form-item-margin-bottom;
color: #666; color: #666;
vertical-align: top;
// nested FormItem // nested FormItem
& > &, & > &,

2
components/input/style/mixin.less
View File

@ -130,7 +130,7 @@
&-addon, &-addon,
&-wrap { &-wrap {
width: 1%; width: 1px; // To make addon/wrap as small as possible
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
} }