Dropdown

2 min read

下拉菜单。

import { Menu, Dropdown } from '@antv/x6-react-components'
import '@antv/x6-react-components/es/menu/style/index.css'
import '@antv/x6-react-components/es/dropdown/style/index.css'

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>
)

<Dropdown overlay={menu}>
  <a href="#">Hover me</a>
</Dropdown>

<Dropdown overlay={menu} trigger={['contextMenu']}>
  <span style={{ userSelect: 'none' }}>Right Click on Me</span>
</Dropdown>
参数说明类型默认值
className自定义的样式名string-
overlay菜单,通常使用 Menu 组件ReactNode-
overlayClassName下拉根元素的类名称string-
overlayStyle下拉根元素的样式CSSProperties-
disabled菜单是否禁用booleanfalse
visible菜单是否显示booleanfalse
trigger触发行为,可选 hover | click | contextMenu,可使用数组设置多个触发行为string | string[]'hover'
placement下拉菜单的位置,可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstring'bottomLeft'
mouseEnterDelaytrigger'hover'时,鼠标移入后延时多少才显示下拉菜单,单位:秒number0.15
mouseLeaveDelaytrigger'hover'时,鼠标移出后延时多少才隐藏下拉菜单,单位:秒number0.1
getPopupContainer菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。(triggerNode: Element) => HTMLElement-
onVisibleChange菜单显示状态改变时调用(visible?: boolean) => void-