React MUI菜单导航

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

创建React项目:

步骤1: 通过npm命令安装React模块来创建React应用程序。

npm create-react-app project name
JavaScript

步骤2: 创建完React项目后,进入文件夹执行不同的操作。

cd project name
JavaScript

步骤3: 在创建ReactJS应用程序之后,使用以下命令安装所需的模块:

npm install @mui/material @emotion/react @emotion/styled
JavaScript

项目结构:

React MUI菜单导航

运行应用的步骤: 打开终端并输入以下命令。

npm start
JavaScript

示例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;
JavaScript

输出:

React MUI菜单导航

示例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;
JavaScript

输出:

React MUI菜单导航

参考: https://mui.com/material-ui/react-menu/

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册