Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translation of Input component #2789

Merged
merged 1 commit into from
Aug 22, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion components/input/demo/addon.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
---
order: 2
title: 前置/后置标签
title:
zh-CN: 前置/后置标签
en-US: Pre / Post tab
---

## zh-CN

用于配置一些固定组合。

## en-US

Using pre & post tabs example.

````jsx
import { Input, Select } from 'antd';
const Option = Select.Option;
Expand Down
16 changes: 13 additions & 3 deletions components/input/demo/autosize-textarea.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
---
order: 6
title: 适应文本高度的文本域
title:
zn-CN: 适应文本高度的文本域
en-US: Autosizing the height to fit the content
---

## zh-CN

`autosize` 属性适用于 `textarea` 节点,并且只有高度会自动变化。另外 `autosize` 可以设定为一个对象,指定最小行数和最大行数。

## en-US

`autosize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content.
An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.


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

ReactDOM.render(
<div>
<Input type="textarea" placeholder="自适应内容高度" autosize />
<Input type="textarea" placeholder="Autosize height based on content lines" autosize />
<div style={{ margin: '24px 0' }} />
<Input type="textarea" placeholder="有最大高度和最小高度" autosize={{ minRows: 2, maxRows: 6 }} />
<Input type="textarea" placeholder="Autosize height with minimum and maximum number of lines" autosize={{ minRows: 2, maxRows: 6 }} />
</div>
, mountNode);
````
10 changes: 9 additions & 1 deletion components/input/demo/basic.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
---
order: 0
title: 基本使用
title:
zn-CN: 基本使用
en-US: Basic usage
---

## zh-CN

基本使用。

## en-US

Basic usage example

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

Expand Down
10 changes: 9 additions & 1 deletion components/input/demo/group.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
---
order: 3
title: 输入框组合
title:
zn-CN: 输入框组合
en-US: Input Group
---

## zh-CN

输入框的组合展现。

## en-US

Input.Group example

````jsx
import { Input, Col } from 'antd';
const InputGroup = Input.Group;
Expand Down
10 changes: 9 additions & 1 deletion components/input/demo/search-input.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
---
order: 4
title: 搜索框
title:
zn-CN: 搜索框
en-US: Search box
---

## zh-CN:

带有搜索按钮的输入框。

## en-US:

Example of creating a search box by grouping a standard input with a search button.

````jsx
import { Input, Button } from 'antd';
import classNames from 'classnames';
Expand Down
20 changes: 15 additions & 5 deletions components/input/demo/size.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
---
order: 1
title: 三种大小
title:
zh-CN: 三种大小
en-US: Three sizes of Input
---

## zh-CN

我们为 `<Input />` 输入框定义了三种尺寸(大、默认、小),高度分别为 `32px`、`28px` 和 `22px`。

注意: 在表单里面,我们只使用大尺寸的输入框。

## en-US

There are three sizes of an Input box: `large` (32px)、`default` (28px) and `small` (22px).

Note: Inside of forms, only the large size is used.

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

ReactDOM.render(
<div className="example-input">
<Input size="large" placeholder="大尺寸" />
<Input placeholder="默认尺寸" />
<Input size="small" placeholder="小尺寸" />
<Input size="large" placeholder="large size" />
<Input placeholder="default size" />
<Input size="small" placeholder="small size" />
</div>
, mountNode);
````
Expand All @@ -24,4 +34,4 @@ ReactDOM.render(
width: 200px;
margin: 0 8px 8px 0;
}
````
````
10 changes: 9 additions & 1 deletion components/input/demo/textarea.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
---
order: 5
title: 文本域
title:
zh-CN: 文本域
en-US: Textarea
---

## zh-CN

用于多行输入,指定 `type` 为一个特殊的 `textarea`。

## en-US

For multi-line user input cases, an input whose `type` prop has the value of `"textarea"` can be used.

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

Expand Down
47 changes: 47 additions & 0 deletions components/input/index.en-US.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
category: Components
chinese: 输入框
type: Form Controls
english: Input
---

A basic widget for getting the user input is a text field.
Keyboard and mouse can be used for providing or changing data.

## When to Use

- A user input in a form field is needed.
- A search input is required.

## API

### Input

| Property | Description | Type | Available Values | Default |
|----------------|-----------------------|----------|------------------|---------------|
| type | The type of input. For a multi-line input, the 'textarea' value can be used. | string | 'text' or 'textarea' | 'text' |
| id | The identifier. | number or string | | |
| value | The content value. | any | | |
| defaultValue | The initial value. | any | | |
| size | The size of the input box. The implicit value is 'default'. Note: in the context of a form, the 'large' size is used. | string | {'large','default','small'} | 'default' |
| disabled | Tell if the input is disabled. | bool | | false |
| addonBefore | The label text displayed before (on the left side of) the input field. | node | | |
| addonAfter | The label text displayed after (on the right side of) the input field. | node | | |
| onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) | | |
| autosize | Height autosize feature, available when type="textarea". | bool or object | `true` or `{ minRows: 2, maxRows: 6 }` | false |

> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined
then `value`, `defaultValue`, and `id` props are automatically set.

#### Input.Group

| Property | Description | Type | Available Values | Default |
|-----------|----------------------------------|--------|-----------------------------|-----------|
| size | The size of `Input.Group` specifies the size of the included `Input` fields. | string | {'large','default','small'} | 'default' |

```html
<Input.Group className={string}>
<Input />
<Input />
</Input.Group>
```
File renamed without changes.