MenuButton 菜单按钮

MenuButton 菜单按钮

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

使用指南

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

API

MenuButton

参数	说明	类型	默认值
label	按钮上的文本内容	ReactNode	-
autoWidth	弹层是否与按钮宽度相同	Boolean	true
popupTriggerType	弹层触发方式可选值:'click', 'hover'	Enum	'click'
popupContainer	弹层容器签名:Function() => void	Function	-
visible	弹层展开状态	Boolean	-
defaultVisible	弹层默认是否展开	Boolean	-
onVisibleChange	弹层在显示和隐藏触发的事件签名:Function() => void	Function	func.noop
popupStyle	弹层自定义样式	Object	-
popupClassName	弹层自定义样式类	String	-
popupProps	弹层属性透传	Object	-
followTrigger	是否跟随滚动	Boolean	-
defaultSelectedKeys	默认激活的菜单项（用法同 Menu 非受控）	Array	[]
selectedKeys	激活的菜单项（用法同 Menu 受控）	Array	-
selectMode	菜单的选择模式，同 Menu可选值:'single', 'multiple'	Enum	-
onItemClick	点击菜单项后的回调，同 Menu签名:Function() => void	Function	func.noop
onSelect	选择菜单后的回调，同 Menu签名:Function() => void	Function	func.noop
menuProps	菜单属性透传	Object	{}

代码示例

基本

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

查看源码在线预览

import { MenuButton } from '@alifd/next';
const { Item } = MenuButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(<div>
    <MenuButton label="Document Edit">{menu}</MenuButton>&nbsp;&nbsp;
    <MenuButton type="primary" label="Document Edit">{menu}</MenuButton>&nbsp;&nbsp;
    <MenuButton type="secondary" label="Document Edit">{menu}</MenuButton><br /><br />
    <MenuButton text label="Document Edit">{menu}</MenuButton>&nbsp;&nbsp;
    <MenuButton text type="primary" label="Document Edit">{menu}</MenuButton>&nbsp;&nbsp;
    <MenuButton text type="secondary" label="Document Edit">{menu}</MenuButton>
</div>, mountNode);

尺寸

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

查看源码在线预览

import { MenuButton } from '@alifd/next';
const { Item } = MenuButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(<div>
    <MenuButton label="Edit Document" size="small">{menu}</MenuButton> &nbsp; &nbsp;
    <MenuButton label="Edit Document" size="medium">{menu}</MenuButton> &nbsp; &nbsp;
    <MenuButton label="Edit Document" size="large">{menu}</MenuButton>
</div>, mountNode);

菜单组

支持菜单组和菜单分割线，使用方法同 Menu.Group, Menu.Item, Menu.Divider。

查看源码在线预览

import { MenuButton } from '@alifd/next';
const { Item, Group, Divider } = MenuButton;
function selectItem(id) {
    console.log(id);
}
ReactDOM.render(<MenuButton type="primary" label="Document Edit" onItemClick={selectItem}>
    <Item key="undo">Undo</Item>
    <Item key="redo">Redo</Item>
    <Divider />
    <Group>
        <Item key="cut">Cut</Item>
        <Item key="copy">Copy</Item>
        <Item key="paste">Paste</Item>
    </Group>
</MenuButton>, mountNode);

菜单选择模式

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

查看源码在线预览

import { MenuButton } from '@alifd/next';
const { Item } = MenuButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(<div>
    <MenuButton label="Document Edit" selectMode="single" onSelect={keys => console.log(keys)}>{menu}</MenuButton>
</div>, mountNode);

MenuButton 菜单按钮

MenuButton 菜单按钮

安装方法

使用指南

MenuButton

代码示例

相关区块

暂无相关区块