Browse Source
Merge pull request #16737 from ant-design/add-select-optionLabelProp-demo
docs: Add select optionLabelProp demo
偏右
6 years ago
GitHub
GPG Key ID:
5 changed files with
150 additions and
4 deletions
components/select/__tests__/__snapshots__/demo.test.js.snap
components/select/demo/multiple.md
components/select/demo/option-label-prop.md
components/select/index.en-US.md
components/select/index.zh-CN.md
@ -647,6 +647,91 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
</div>
`;
exports[`renders ./components/select/demo/option-label-prop.md correctly 1`] = `
<div
class="ant-select ant-select-enabled"
style="width:100%"
>
<div
aria-autocomplete="list"
aria-controls=""
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--multiple"
role="combobox"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection__placeholder"
style="display:none;user-select:none;-webkit-user-select:none"
unselectable="on"
>
select one country
</div>
<ul>
<li
class="ant-select-selection__choice"
role="presentation"
style="user-select:none;-webkit-user-select:none"
title="China"
unselectable="on"
>
<div
class="ant-select-selection__choice__content"
>
China
</div>
<span
class="ant-select-selection__choice__remove"
>
<i
aria-label="icon: close"
class="anticon anticon-close ant-select-remove-icon"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</span>
</li>
<li
class="ant-select-search ant-select-search--inline"
>
<div
class="ant-select-search__field__wrap"
>
<input
autocomplete="off"
class="ant-select-search__field"
value=""
/>
<span
class="ant-select-search__field__mirror"
>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
`;
exports[`renders ./components/select/demo/search.md correctly 1`] = `
<div
class="ant-select ant-select-enabled"
@ -7,11 +7,11 @@ title:
## zh-CN
多选，从已有条目中选择（scroll the menu）
多选，从已有条目中选择。
## en-US
Multiple selection, selecting from existing items (scroll the menu) .
Multiple selection, selecting from existing items.
```jsx
import { Select } from 'antd';
@ -0,0 +1,61 @@
---
order: 4
title:
zh-CN: 定制回填内容
en-US: Custom selection render
---
## zh-CN
使用 `optionLabelProp` 指定回填到选择框的 `Option` 属性。
## en-US
Spacified the prop name of Option which will be rendered in select box.
```jsx
import { Select } from 'antd';
const { Option } = Select;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
< Select
mode="multiple"
style={{ width: '100%' }}
placeholder="select one country"
defaultValue={['china']}
onChange={handleChange}
optionLabelProp="label"
>
< Option value = "china" label = "China" >
< span role = "img" aria-label = "China" >
🇨🇳{' '}
< / span >
China (中国)
< / Option >
< Option value = "usa" label = "USA" >
< span role = "img" aria-label = "USA" >
🇺🇸{' '}
< / span >
USA (美国)
< / Option >
< Option value = "japan" label = "Japan" >
< span role = "img" aria-label = "USA" >
🇯🇵{' '}
< / span >
Japan (日本)
< / Option >
< Option value = "koean" label = "Koean" >
< span role = "img" aria-label = "USA" >
🇰🇷{' '}
< / span >
Koean (韩国)
< / Option >
< / Select > ,
mountNode,
);
```
@ -43,7 +43,7 @@ Select component to select value from options.
| mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' | 'default' |
| notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' |
| 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 | `value` for `combobox` , `children` for other modes |
| optionLabelProp | Which prop value of option will render as content of select. [Example ](https://codesandbox.io/s/antd-reproduction-template-tk678 ) | string | `value` for `combobox` , `children` for other modes |
| placeholder | Placeholder of select | string\|ReactNode | - |
| showArrow | Whether to show the drop-down arrow | boolean | true |
| showSearch | Whether show search input in single mode. | boolean | false |
@ -43,7 +43,7 @@ title: Select
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - |
| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` 。 | string | `children` （combobox 模式下为 `value` ） |
| placeholder | 选择框默认文字 | string | - |
| showArrow | 是否显示下拉小箭头 | boolean | true |
偏右
6 years ago
GitHub