极客教程React MUI菜单导航
React MUI 是一个提供完整组件的UI库，将自己的设计系统引入到我们的成熟组件中。MUI是一个用户界面库，为更快捷简单的Web开发提供了预定义和可自定义的React组件，这些Material-UI组件基于Google的Material Design。
在本文中，我们将讨论 React MUI菜单导航 。菜单导航组件在临时表面上显示一系列选择。
菜单变体：
- 基本菜单： 默认情况下，它是一个在锚点元素上打开的基本菜单。
- 图标菜单： 在这个变体中，菜单使用图标来显示菜单项。
- 密集菜单： 对于具有长列表或长文本的任何菜单， 密集 属性可以减少填充和文本大小。
- 已选择菜单： 在这个变体中，菜单中已经选择了一个项目。
- 定位菜单： 由于菜单使用弹出组件来定位，因此菜单也可以使用相同的属性进行定位。
- 菜单列表组成： MenuList组件用于处理焦点。
- 账户菜单： 要创建一个账户菜单，内容可以与Avatar组件混合使用。
- 定制： 菜单组件可以使用自定义样式进行定制。由于MenuItem是ListItem组件的包装器，因此可以使用相同的列表组成特性。
- 最大高度菜单： 如果菜单的高度未能显示所有项目，则可以定义菜单内部滚动。可以使用 最大高度 属性进行自定义。
- 限制： 由于flexbox的bug，菜单导航存在限制，如文本溢出。我们可以使用无换行符的Typography组件来解决这个问题。
- 变换过渡： 菜单导航可以使用不同的过渡效果。这是通过使用 TransitionComponent 属性来定义的。
- 上下文菜单： 也可以使用上下文菜单来通过右键单击事件打开菜单。这可以通过元素的 onContextMenu 属性进行配置。
- 无样式： 可以使用无样式的菜单组件变体。
- API： API列表如下：
<ClickAwayListener /><Menu /><MenuItem /><MenuList /><Popover /><Popper />
语法：
<Button>
Click
</Button>
<Menu>
<MenuItem>...</MenuItem>
<MenuItem>...</MenuItem>
</Menu>
创建React项目：
步骤1： 通过npm命令安装React模块来创建React应用程序。
npm create-react-app project name
步骤2： 创建完React项目后，进入文件夹执行不同的操作。
cd project name
步骤3： 在创建ReactJS应用程序之后，使用以下命令安装所需的模块：
npm install @mui/material @emotion/react @emotion/styled
项目结构：
运行应用的步骤： 打开终端并输入以下命令。
npm start
示例1： 以下示例演示了React MUI图标菜单。在这个示例中，菜单组件由材料图标组成。
import { Print, Save, Share } from "@mui/icons-material";
import {
Divider,
ListItemIcon,
ListItemText,
MenuItem,
MenuList,
Paper,
Typography,
} from "@mui/material";
import React from "react";
function App() {
return (
<center>
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Menu Navigation</h2>
</div>
<div>
<Paper sx={{ width: 320, maxWidth: "100%" }}>
<MenuList>
<MenuItem>
<ListItemIcon>
<Save fontSize="small" />
</ListItemIcon>
<ListItemText>Save</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Share fontSize="small" />
</ListItemIcon>
<ListItemText>Share</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Print fontSize="small" />
</ListItemIcon>
<ListItemText>Print</ListItemText>
</MenuItem>
<Divider />
<MenuItem>
<Typography>Add your content</Typography>
</MenuItem>
<MenuItem>
<Typography>Define spacing</Typography>
</MenuItem>
</MenuList>
</Paper>
</div>
</center>
);
}
export default App;
输出：
示例2： 下面的示例演示了React MUI定位菜单。在这个示例中，菜单组件使用popover props来定位自己，并且它被对齐到“右下角”位置。
import { Print, Save, Share } from "@mui/icons-material";
import {
ListItemIcon,
ListItemText,
Menu,
MenuItem,
Button
} from "@mui/material";
import * as React from "react";
import { useState } from "react";
function App() {
const [menu, setMenu] = useState(null);
const open = Boolean(menu);
const handleClick = (e) => {
setMenu(e.currentTarget);
};
return (
<center>
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Menu Navigation</h2>
</div>
<div>
<Button
id="button"
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
color="secondary"
variant="contained"
>
Open
</Button>
<Menu
id="menu"
anchorEl={menu}
open={open}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
>
<MenuItem>
<ListItemIcon>
<Save fontSize="small" />
</ListItemIcon>
<ListItemText>Save</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Share fontSize="small" />
</ListItemIcon>
<ListItemText>Share</ListItemText>
</MenuItem>
<MenuItem>
<ListItemIcon>
<Print fontSize="small" />
</ListItemIcon>
<ListItemText>Print</ListItemText>
</MenuItem>
</Menu>
</div>
</center>
);
}
export default App;
输出:
参考： https://mui.com/material-ui/react-menu/