ant-design/components/select/demo/custom-dropdown-menu.md
2018-12-01 00:24:16 +08:00

726 B

order title
21
zh-CN en-US
扩展菜单 Custom dropdown

zh-CN

使用 dropdownRender 对下拉菜单进行自由扩展。

en-US

Customize the dropdown menu via dropdownRender.

import { Select, Icon, Divider } from 'antd';

const Option = Select.Option;

ReactDOM.render(
  <Select
    defaultValue="lucy"
    style={{ width: 120 }}
    dropdownRender={menu => (
      <div>
        {menu}
        <Divider style={{ margin: '4px 0' }} />
        <div style={{ padding: '8px', cursor: 'pointer' }}>
          <Icon type="plus" /> Add item
        </div>
      </div>
    )}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
  </Select>,
  mountNode,
);