From b2ff1dcc752a0fec8b6b62670092ae36aafc4adb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=86=E7=A6=BB?= Date: Sun, 10 Jul 2016 08:55:43 +0800 Subject: [PATCH] docs: i18n of Select (#1899) --- components/select/demo/basic.md | 10 +++- components/select/demo/combobox.md | 10 +++- components/select/demo/coordinate.md | 13 +++- components/select/demo/label-in-value.md | 12 +++- components/select/demo/multiple.md | 10 +++- components/select/demo/optgroup.md | 10 +++- components/select/demo/search-box.md | 11 +++- components/select/demo/search.md | 8 ++- components/select/demo/size.md | 10 +++- components/select/demo/tags.md | 10 +++- components/select/index.en-US.md | 59 +++++++++++++++++++ .../select/{index.md => index.zh-CN.md} | 2 +- 12 files changed, 154 insertions(+), 11 deletions(-) create mode 100644 components/select/index.en-US.md rename components/select/{index.md => index.zh-CN.md} (99%) diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md index 97c0be4be1..a39f31b306 100644 --- a/components/select/demo/basic.md +++ b/components/select/demo/basic.md @@ -1,10 +1,18 @@ --- order: 0 -title: 基本使用 +title: + zh-CN: 基本使用 + en-US: Basic Usage --- +## zh-CN + 基本使用。 +## en-US + +Basic Usage. + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md index 31ec65cc1f..26a14b1cf9 100644 --- a/components/select/demo/combobox.md +++ b/components/select/demo/combobox.md @@ -1,10 +1,18 @@ --- order: 4 -title: 智能提示 +title: + zh-CN: 智能提示 + en-US: Automatic completion --- +## zh-CN + 输入框自动完成功能，下面是一个账号注册表单的例子。 +## en-US + +Automatic completion of select input. + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index c706a77dc6..2402b6462e 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -1,12 +1,23 @@ --- order: 6 -title: 联动 +title: + zh-CN: 联动 + en-US: coordinate --- +## zh-CN + 省市联动是典型的例子。 推荐使用 [Cascader](/components/cascader) 组件。 +## en-US + +Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated. + +Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable. + + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md index eeef54370c..1cea9d39c3 100644 --- a/components/select/demo/label-in-value.md +++ b/components/select/demo/label-in-value.md @@ -1,12 +1,22 @@ --- order: 10 -title: 获得选项的文本 +title: + zh-CN: 获得选项的文本 + en-US: Get value of selected item --- +## zh-CN + 默认情况下 `onChange` 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 `labelInValue` 属性。 选中项的 label 会被包装到 value 中传递给 `onChange` 等函数，此时 value 是一个对象。 +## en-US + +As a default behavior, the onChange callback can only get the value of the selected item. The labelInValue prop can be used to get the label property of the selected item. + +The label of the selected item will be packed as an object for passing to the onChange callback. + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md index c8bd9382b1..1f73f378ed 100644 --- a/components/select/demo/multiple.md +++ b/components/select/demo/multiple.md @@ -1,10 +1,18 @@ --- order: 2 -title: 多选 +title: + zh-CN: 多选 + en-US: mutiple selection --- +## zh-CN + 多选，从已有条目中选择（scroll the menu） +## en-US + +Multiple selection, selecting from existing items (scroll the menu). + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md index 7a0b52fbf2..9eefabe2b4 100644 --- a/components/select/demo/optgroup.md +++ b/components/select/demo/optgroup.md @@ -1,10 +1,18 @@ --- order: 5 -title: 分组 +title: + zh-CN: 分组 + en-US: Option Group --- +## zh-CN + 用 `OptGroup` 进行选项分组。 +## en-US + +Using `OptGroup` to group the options. + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md index 761bde1cc9..047cf3d49a 100644 --- a/components/select/demo/search-box.md +++ b/components/select/demo/search-box.md @@ -1,10 +1,19 @@ --- order: 9 -title: 搜索框 +title: + zh-CN: 搜索框 + en-US: Search Box --- +## zh-CN + 带有搜索按钮的自动补全输入框。 +## en-US + +Autocomplete select with search field. + + ````jsx import { Input, Select, Button, Icon } from 'antd'; import jsonp from 'jsonp'; diff --git a/components/select/demo/search.md b/components/select/demo/search.md index 5bd4520e18..58a62930ca 100644 --- a/components/select/demo/search.md +++ b/components/select/demo/search.md @@ -1,10 +1,16 @@ --- order: 1 -title: 带搜索框 +title: + zh-CN: 带搜索框 + en-US: Select with search field --- +## zh-CN 展开后可对选项进行搜索。 +## en-US +Search the options while expanded. + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/size.md b/components/select/demo/size.md index cc3efbeeb0..546ef78326 100644 --- a/components/select/demo/size.md +++ b/components/select/demo/size.md @@ -1,10 +1,18 @@ --- order: 0 -title: 三种大小 +title: + zh-CN: 三种大小 + en-US: Three sizes --- +## zh-CN + 三种大小的选择框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` +## en-US + +The height of the inpub field for the select defaults to 28px. If size is set to large, the height will be 32px, and if set to small, 22px. + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md index e340c7f915..9be289d92c 100644 --- a/components/select/demo/tags.md +++ b/components/select/demo/tags.md @@ -1,10 +1,18 @@ --- order: 3 -title: 标签 +title: + zh-CN: 标签 + en-US: Tags --- +## zh-CN + tags select，随意输入的内容（scroll the menu） +## en-US + +Select with tags, transform input to tag (scroll the menu) + ````jsx import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md new file mode 100644 index 0000000000..47eaabd210 --- /dev/null +++ b/components/select/index.en-US.md @@ -0,0 +1,59 @@ +--- +category: Components +type: Form Control +title: Select +--- + +A Selector similar to Select2. + +## When to use + +A dropdown menu for choosing, an elegant alternative to the native select component. + +```html + +``` + +## API + +### Select props + +| Property | Description | Type | Default | +|----------|----------------|----------|--------------| +| value | Current selected option. | string/Array | - | +| defaultValue | Initial selected option. | string/Array | - | +| multiple | Allow multiple select. | boolean | false | +| allowClear | Show clear button, effective in multiple mode only. | boolean | false | +| filterOption | If true, filter options by input, if function, filter options agianst it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | +| tags | When tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean |false | +| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - | +| onDeselect | Called when a option is deselected. param is option's value. only called for multiple or tags, effective in multiple or tags mode only. | function(value) | - | +| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - | +| onSearch | Callback function that is fired when input changed. | function(value: String) | | +| placeholder | Placeholder of select | string | - | +| notFoundContent | Specify content to show when no result matches..| string | 'Not Found' | +| dropdownMatchSelectWidth | Whether dropdown's with is same with select. | boolean | true | +| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | +| optionLabelProp | Which prop value of option will render as content of select. | string | `children` | +| combobox | Enable combobox mode(can not set multiple at the same time). | boolean | false | +| size | Size of Select input. `large` `small` | String | default | +| showSearch | Whether show search input in single mode.| boolean | false | +| disabled | Whether disabled select | boolean | false | +| getPopupContainer | Parent Node which the selector should be renderd to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body | + +### Option props + +| Property | Description | Type | Default | +|----------|----------------|----------|--------------| +| disabled | Disable this option | Boolean | false | +| key | if react request you to set this property, you can set it to value of option, and then ignore value property. | String | | +| value | default to filter with this propery | String | - | + +### OptGroup props + +| Property | Description | Type | Default | +|----------|----------------|----------|-----------------| +| label | Group label | String/React.Element | - | +| key | | String | - | \ No newline at end of file diff --git a/components/select/index.md b/components/select/index.zh-CN.md similarity index 99% rename from components/select/index.md rename to components/select/index.zh-CN.md index e70b3ef3da..b82208d3f7 100644 --- a/components/select/index.md +++ b/components/select/index.zh-CN.md @@ -3,7 +3,7 @@ category: Components chinese: 选择器 type: Form Controls english: Select ---- + 类似 Select2 的选择器。