ant-design/components/dropdown/demo/context-menu.md

57 lines
981 B
Markdown
Raw Normal View History

2017-11-26 14:02:00 +08:00
---
order: 8
title:
zh-CN: 右键菜单
en-US: Context Menu
---
## zh-CN
2018-09-07 14:03:17 +08:00
默认是移入触发菜单,可以点击鼠标右键触发。
2017-11-26 14:02:00 +08:00
## en-US
2018-09-07 14:03:17 +08:00
The default trigger mode is `hover`, you can change it to `contextMenu`.
2017-11-26 14:02:00 +08:00
2019-05-07 14:57:32 +08:00
```jsx
2017-11-26 14:02:00 +08:00
import { Menu, Dropdown } from 'antd';
const menu = (
<Menu>
<Menu.Item key="1">1st menu item</Menu.Item>
<Menu.Item key="2">2nd menu item</Menu.Item>
<Menu.Item key="3">3rd menu item</Menu.Item>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu} trigger={['contextMenu']}>
<div
2019-12-26 14:48:29 +08:00
className="site-dropdown-context-menu"
style={{
textAlign: 'center',
height: 200,
lineHeight: '200px',
}}
>
Right Click on here
</div>
2018-06-27 15:55:04 +08:00
</Dropdown>,
2019-05-07 14:57:32 +08:00
mountNode,
2018-11-28 15:00:03 +08:00
);
2019-05-07 14:57:32 +08:00
```
2019-12-26 14:48:29 +08:00
```css
.site-dropdown-context-menu {
background: #f7f7f7;
color: #777;
}
```
<style>
[data-theme="dark"] .site-dropdown-context-menu {
background: #141414;
color: rgba(255,255,255,.65);
}
</style>