Skip to content

Commit

Permalink
Merge branch 'fix-1771' of https://github.com/ddcat1115/ant-design in…
Browse files Browse the repository at this point in the history
…to ddcat1115-fix-1771
  • Loading branch information
RaoHai committed May 26, 2016
2 parents 8de1a5c + c4454de commit 3c98d3f
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 44 deletions.
36 changes: 1 addition & 35 deletions components/form/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,14 @@ english: Form

表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。

这里我们分别封装了表单域 `<Form.Item />` 和输入控件 `<Input />`
这里我们封装了表单域 `<Form.Item />`

```jsx
<Form.Item {...props}>
{children}
</Form.Item>
```

## Input 输入框

```jsx
<Input {...props} />
```

> 注:标准表单中一律使用大号控件。
## API
Expand Down Expand Up @@ -118,34 +112,6 @@ CustomizedForm = Form.create({})(CustomizedForm);
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | bool | | false |
| prefixCls | 样式类名,默认为 ant-form,通常您不需要设置 | string | | 'ant-form' |

### Input

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| type | 【必须】声明 input 类型,同原生 input 标签的 type 属性 | string | | 'text' |
| id | id | number 或 string | | |
| value | value 值 | any | | |
| defaultValue | 设置初始默认值 | any | | |
| size | 控件大小,默认值为 default 。注:标准表单内的输入框大小限制为 large。 | string | {'large','default','small'} | 'default' |
| disabled | 是否禁用状态,默认为 false | bool | | false |
| addonBefore | 带标签的 input,设置前置标签 | node | | |
| addonAfter | 带标签的 input,设置后置标签 | node | | |
| onPressEnter | 按下回车的回调 | function(e) | | |

> 如果 `Input``Form.Item` 内,并且 `Form.Item` 设置了 `id``options` 属性,则 `value` `defaultValue``id` 属性会被自动设置。
#### Input.Group

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| size | `Input.Group` 中所有的 `Input` 的大小 | string | {'large','default','small'} | 'default' |

```html
<Input.Group className={string}>
<Input />
<Input />
</Input.Group>
```

<style>
.code-box-demo .ant-form-horizontal {
Expand Down
16 changes: 16 additions & 0 deletions components/input/demo/add-on.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
order: 2
title: 前置/后置标签
---

用于配置一些固定组合。

````jsx
import { Input } from 'antd';

ReactDOM.render(
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
, mountNode);
````


13 changes: 13 additions & 0 deletions components/input/demo/basic.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
order: 0
title: 基本使用
---

基本使用。

````jsx
import { Input } from 'antd';

ReactDOM.render(<Input placeholder="基本使用" />, mountNode);
````

36 changes: 36 additions & 0 deletions components/input/demo/group.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
order: 3
title: 输入框组合
---

各类输入框的组合展现。

````jsx
import { Input, Select, Col } from 'antd';
const InputGroup = Input.Group;
const Option = Select.Option;

ReactDOM.render(
<div>
<InputGroup size="large">
<Input placeholder="www.mysite" />
<div className="ant-input-group-wrap">
<Select defaultValue=".com" style={{ width: 70 }}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
</div>
</InputGroup>
<InputGroup size="large" style={{ marginTop: 8 }}>
<Col span="4">
<Input defaultValue="0571" />
</Col>
<Col span="8">
<Input defaultValue="26888888" />
</Col>
</InputGroup>
</div>
, mountNode);
````
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
order: 10
order: 4
title: 搜索框
---

带有搜索按钮
带有搜索按钮的输入框

````jsx
import { Input, Button } from 'antd';
Expand Down
14 changes: 7 additions & 7 deletions components/form/demo/input.md → components/input/demo/size.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
order: 0
title: Input 输入框
order: 1
title: 三种大小
---

我们为 `<Input />` 输入框定义了三种尺寸(大、默认、小),具体使用详见 [API](/components/form/#input)
我们为 `<Input />` 输入框定义了三种尺寸(大、默认、小),高度分别为 `32px``28px``22px`

注意: 在表单里面,我们只使用**大尺寸**, 即高度为 **32px**,作为唯一的尺寸
注意: 在表单里面,我们只使用大尺寸的输入框

````jsx
import { Input } from 'antd';
Expand All @@ -21,7 +21,7 @@ ReactDOM.render(

````css
.example-input .ant-input {
width: 140px;
margin-right: 8px;
width: 200px;
margin: 0 8px 8px 0;
}
````
````
46 changes: 46 additions & 0 deletions components/input/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
category: Components
chinese: 输入框
type: Form Control
english: Input
---

通过鼠标或键盘输入内容,是最基础的表单域的包装。

## 何时使用

- 需要用户输入表单域内容时。
- 提供组合型输入框,带搜索的输入框,还可以进行大小选择。



## API

### Input

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| type | 【必须】声明 input 类型,同原生 input 标签的 type 属性 | string | | 'text' |
| id | id | number 或 string | | |
| value | value 值 | any | | |
| defaultValue | 设置初始默认值 | any | | |
| size | 控件大小,默认值为 default 。注:标准表单内的输入框大小限制为 large。 | string | {'large','default','small'} | 'default' |
| disabled | 是否禁用状态,默认为 false | bool | | false |
| addonBefore | 带标签的 input,设置前置标签 | node | | |
| addonAfter | 带标签的 input,设置后置标签 | node | | |
| onPressEnter | 按下回车的回调 | function(e) | | |

> 如果 `Input``Form.Item` 内,并且 `Form.Item` 设置了 `id``options` 属性,则 `value` `defaultValue``id` 属性会被自动设置。
#### Input.Group

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| size | `Input.Group` 中所有的 `Input` 的大小 | string | {'large','default','small'} | 'default' |

```html
<Input.Group className={string}>
<Input />
<Input />
</Input.Group>
```

0 comments on commit 3c98d3f

Please sign in to comment.