mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Merge branch 'ddcat1115-fix-1771'
This commit is contained in:
RaoHai
commit
2ab6879b12
@ -20,7 +20,7 @@ english: Form
|
||||
|
||||
表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。
|
||||
|
||||
这里我们分别封装了表单域 `<Form.Item />` 和输入控件 `<Input />`。
|
||||
这里我们封装了表单域 `<Form.Item />` 。
|
||||
|
||||
```jsx
|
||||
<Form.Item {...props}>
|
||||
@ -28,12 +28,6 @@ english: Form
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
## Input 输入框
|
||||
|
||||
```jsx
|
||||
<Input {...props} />
|
||||
```
|
||||
|
||||
> 注：标准表单中一律使用大号控件。
|
||||
|
||||
## API
|
||||
@ -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 {
|
||||
|
||||
16
components/input/demo/add-on.md
Normal file
16
components/input/demo/add-on.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
order: 2
|
||||
title: 前置/后置标签
|
||||
---
|
||||
|
||||
用于配置一些固定组合。
|
||||
|
||||
````jsx
|
||||
import { Input } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
|
||||
13
components/input/demo/basic.md
Normal file
13
components/input/demo/basic.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
order: 0
|
||||
title: 基本使用
|
||||
---
|
||||
|
||||
基本使用。
|
||||
|
||||
````jsx
|
||||
import { Input } from 'antd';
|
||||
|
||||
ReactDOM.render(<Input placeholder="基本使用" />, mountNode);
|
||||
````
|
||||
|
||||
36
components/input/demo/group.md
Normal file
36
components/input/demo/group.md
Normal file
@ -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);
|
||||
````
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
order: 10
|
||||
order: 4
|
||||
title: 搜索框
|
||||
---
|
||||
|
||||
带有搜索按钮。
|
||||
带有搜索按钮的输入框。
|
||||
|
||||
````jsx
|
||||
import { Input, Button } from 'antd';
|
||||
@ -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';
|
||||
@ -21,7 +21,7 @@ ReactDOM.render(
|
||||
|
||||
````css
|
||||
.example-input .ant-input {
|
||||
width: 140px;
|
||||
margin-right: 8px;
|
||||
width: 200px;
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
````
|
||||
````
|
||||
46
components/input/index.md
Normal file
46
components/input/index.md
Normal file
@ -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>
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user