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 />
语法:
创建React项目:
步骤1: 通过npm命令安装React模块来创建React应用程序。
步骤2: 创建完React项目后,进入文件夹执行不同的操作。
步骤3: 在创建ReactJS应用程序之后,使用以下命令安装所需的模块:
项目结构:
运行应用的步骤: 打开终端并输入以下命令。
示例1: 以下示例演示了React MUI图标菜单。在这个示例中,菜单组件由材料图标组成。
输出:
示例2: 下面的示例演示了React MUI定位菜单。在这个示例中,菜单组件使用popover props来定位自己,并且它被对齐到“右下角”位置。
输出:
参考: https://mui.com/material-ui/react-menu/