在material-ui中,要将标题和关闭按钮添加到菜单的顶部,可以按照以下步骤进行操作:
下面是一个示例代码:
import React, { useState } from 'react';
import { Button, Menu, MenuItem, Typography, IconButton } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import CloseIcon from '@material-ui/icons/Close';
const MyMenu = () => {
const [anchorEl, setAnchorEl] = useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Button aria-controls="menu" aria-haspopup="true" onClick={handleClick}>
<MenuIcon />
</Button>
<Menu
id="menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem>
<Typography variant="h6">菜单标题</Typography>
<IconButton edge="end" color="inherit" onClick={handleClose}>
<CloseIcon />
</IconButton>
</MenuItem>
<MenuItem>菜单项1</MenuItem>
<MenuItem>菜单项2</MenuItem>
<MenuItem>菜单项3</MenuItem>
</Menu>
</div>
);
};
export default MyMenu;
在上述代码中,我们使用了Button组件来创建一个菜单触发按钮,点击该按钮会弹出菜单。菜单中的标题使用Typography组件来显示,关闭按钮使用IconButton组件来显示。通过设置Menu组件的anchorEl属性来控制菜单的弹出和关闭。
领取专属 10元无门槛券
手把手带您无忧上云