Merge pull request #1735 from ant-design/fix-input-size

fix: Input[size] should be configurable, close: #1732
This commit is contained in:
Leon Shi 2016-05-18 17:36:29 +08:00
commit 208392a6aa
4 changed files with 17 additions and 21 deletions

View File

@ -6,7 +6,7 @@ title: 输入框组合
各类输入框的组合展现。
````jsx
import { Form, Input, Select, Row, Col } from 'antd';
import { Form, Input, Select, Col } from 'antd';
const FormItem = Form.Item;
const InputGroup = Input.Group;
const Option = Select.Option;
@ -68,27 +68,23 @@ ReactDOM.render(
label="电话号码:"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}>
<Row>
<InputGroup>
<Col span="4">
<Input id="tel1" defaultValue="086" />
</Col>
<Col span="2">
<p className="ant-form-split">--</p>
</Col>
<Col span="18">
<InputGroup>
<Col span="8">
<Input id="tel1" />
</Col>
<Col span="8">
<Input id="tel2" />
</Col>
<Col span="8">
<Input id="tel3" />
</Col>
</InputGroup>
<Col span="6">
<Input id="tel1" />
</Col>
</Row>
<Col span="6">
<Input id="tel2" />
</Col>
<Col span="6">
<Input id="tel3" />
</Col>
</InputGroup>
</FormItem>
</Form>

View File

@ -137,6 +137,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
#### Input.Group
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| size | `Input.Group` 中所有的 `Input` 的大小 | string | {'large','default','small'} | 'default' |
```html
<Input.Group className={string}>
<Input />

View File

@ -122,12 +122,6 @@ form {
}
}
.ant-input,
.ant-input-group .ant-input,
.ant-input-group .ant-input-group-addon {
.input-lg();
}
textarea.ant-input {
height: auto;
}

View File

@ -4,6 +4,8 @@ import classNames from 'classnames';
export default function Group(props) {
const className = classNames({
'ant-input-group': true,
'ant-input-group-lg': props.size === 'large',
'ant-input-group-sm': props.size === 'small',
[props.className]: !!props.className,
});
return (