mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 13:47:02 +08:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/form/demo/input-group.md
View File

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

4
components/form/index.md
View File

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

6
components/form/style/index.less
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 { textarea.ant-input {
height: auto; height: auto;
} }

2
components/input/Group.jsx
View File

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