mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 00:29:12 +08:00
fc5610653e
* feat: implement optionRender api * chore: bump rc-cascader * chore: bump rc-tree-select * docs: update demo * Update components/select/demo/option-render.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * Update components/select/demo/option-render.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * Update components/select/index.en-US.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * Update components/select/index.zh-CN.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 红果汁 <pingfj77@gmail.com> * docs: fix doc * test: update snap * docs: rename prop --------- Signed-off-by: 红果汁 <pingfj77@gmail.com> Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>
57 lines
1.1 KiB
TypeScript
57 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import type { SelectProps } from 'antd';
|
|
import { Select, Space } from 'antd';
|
|
|
|
const handleChange = (value: string[]) => {
|
|
console.log(`selected ${value}`);
|
|
};
|
|
|
|
const options: SelectProps['options'] = [
|
|
{
|
|
label: 'China',
|
|
value: 'china',
|
|
emoji: '🇨🇳',
|
|
desc: 'China (中国)',
|
|
},
|
|
{
|
|
label: 'USA',
|
|
value: 'usa',
|
|
emoji: '🇺🇸',
|
|
desc: 'USA (美国)',
|
|
},
|
|
{
|
|
label: 'Japan',
|
|
value: 'japan',
|
|
emoji: '🇯🇵',
|
|
desc: 'Japan (日本)',
|
|
},
|
|
{
|
|
label: 'Korea',
|
|
value: 'korea',
|
|
emoji: '🇰🇷',
|
|
desc: 'Korea (韩国)',
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => (
|
|
<Select
|
|
mode="multiple"
|
|
style={{ width: '100%' }}
|
|
placeholder="select one country"
|
|
defaultValue={['china']}
|
|
onChange={handleChange}
|
|
optionLabelProp="label"
|
|
options={options}
|
|
optionRender={(option) => (
|
|
<Space>
|
|
<span role="img" aria-label={option.data.label}>
|
|
{option.data.emoji}
|
|
</span>
|
|
{option.data.desc}
|
|
</Space>
|
|
)}
|
|
/>
|
|
);
|
|
|
|
export default App;
|