MenuButton

提供下拉菜单的按钮。

如何使用 #

  1. 通过触发按钮打开弹层菜单。支持透传所有的 Button 属性。
  2. 子组件 Item, Group, DividerMenu 中对应的子组件,请参考 Menu 文档。

代码演示 #

基本 #

最简单的用法。支持Buttonshape, type, size, component, ghost 等属性透传。

尺寸 #

可以通过 size 属性改变按钮大小。

多选菜单 #

通过 selectMode 控制菜单的选择模式。

API #

参数 说明 类型 默认值 是否必填
label 按钮上的文本内容 React.ReactNode -
autoWidth 弹层是否与按钮宽度相同 boolean true
popupTriggerType 弹层触发方式 'click' | 'hover' 'click'
popupContainer 弹层容器 string | HTMLElement | ((target: HTMLElement) => HTMLElement) -
visible 弹层展开状态 boolean -
defaultVisible 弹层默认是否展开 boolean -
onVisibleChange 弹层在显示和隐藏触发的事件 (visible: boolean, type: string) => void -
popupStyle 弹层自定义样式 React.CSSProperties -
popupClassName 弹层自定义样式类 string -
popupProps 弹层属性透传 PopupProps -
followTrigger 菜单是否跟随滚动 boolean -
defaultSelectedKeys 默认激活的菜单项(用法同 Menu 非受控) Array<string> []
selectedKeys 激活的菜单项(用法同 Menu 受控) string | Array<string> -
selectMode 菜单的选择模式,同 Menu 'single' | 'multiple' -
onItemClick 点击菜单项后的回调,同 Menu

签名:
参数:
key: 点击的菜单项的 key 值
item: 点击的菜单项对象
event: 事件对象
MenuProps['onItemClick'] -
onSelect 选择菜单后的回调,同 Menu

签名:
参数:
selectedKeys: 选中的所有菜单项的值
item: 选中或取消选中的菜单项
extra: 选中时的额外参数
MenuProps['onSelect'] -
menuProps 菜单属性透传 MenuProps -