ant-design/components/select/demo/custom-dropdown-menu.md
二货机器人 2ea28af6ed
Virtual select component (#18658)
* init

* fix firefox

* add active style

* adjust arrow style

* update select

* update icon logic

* render empty

* init multiple

* fix ff display style

* sync font size

* adjust padding style

* add padding

* padding it

* hotfix of chrome

* single sm

* multiple size

* update option group style

* update snapshot

* clean up transition

* rm combobox in ts define

* auto complete init

* fix auto option def

* update demo

* update demo

* update uncertain demo

* update demo

* warning if user set `size` on AutoComplete

* add debug demo

* updat demo

* update demo of disabled

* update snapshot

* rm useless test

* fix pagination test

* fix Table test

* fix calendar test case

* fix calendar test case

* adjust style

* add big data demo

* support clean up

* fix ts define

* fix lint

* fix demo lint

* fix style lint fix

* rm useless deps

* update snapshot

* stop mock

* add space
2019-09-12 20:15:17 +08:00

47 lines
869 B
Markdown

---
order: 21
title:
zh-CN: 扩展菜单
en-US: Custom dropdown
---
## zh-CN
使用 `dropdownRender` 对下拉菜单进行自由扩展。
## en-US
Customize the dropdown menu via `dropdownRender`.
```jsx
import { Select, Divider, message } from 'antd';
import { Plus } from '@ant-design/icons';
const { Option } = Select;
ReactDOM.render(
<Select
defaultValue="lucy"
style={{ width: 120 }}
dropdownRender={menu => (
<div>
{menu}
<Divider style={{ margin: '4px 0' }} />
<a
style={{ padding: '8px', display: 'block', cursor: 'pointer' }}
onClick={() => {
message.info('Add an item!');
}}
>
<Plus /> Add item
</a>
</div>
)}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</Select>,
mountNode,
);
```