【Material-UI】Menu中的 Dense Menu 和 Selected Menu 详解

Material-UI 是 React 生态系统中备受欢迎的 UI 框架之一，为开发者提供了丰富的组件以实现优雅和高效的用户界面。在 Material-UI 的 Menu 组件中，Dense menu 和 Selected menu 是常用的两种模式，分别适用于不同的使用场景。本文将详细介绍这两种模式，并展示如何在实际项目中使用它们来优化用户体验。

一、Menu 组件概述

1. Menu 组件介绍

Menu 组件是 Material-UI 提供的一个弹出式列表菜单，通常用于用户在点击某个按钮或元素时显示一系列选项。菜单可以包含多个 MenuItem 组件，每个菜单项都可以是可选择的，且支持自定义样式和功能。

Material-UI 的 Menu 组件功能强大，能够轻松实现复杂的用户交互。例如，Dense menu 可以优化大量选项的显示，而 Selected menu 则可用于增强选项选择的交互体验。

2. Menu 组件的用途

Menu 组件在以下场景中广泛应用：

• 导航菜单：为用户提供导航路径。
• 选项列表：为用户提供可以进行选择的多个选项，如设置菜单。
• 上下文菜单：右键点击某个区域后弹出的操作列表。

二、Dense Menu：高效显示大量选项

1. Dense Menu 的作用

当菜单中包含大量的选项时，使用默认的菜单可能会导致每个菜单项占用较多的垂直空间，影响整体界面的紧凑性。Dense menu 提供了一种解决方案，通过减少每个菜单项的内边距和文本大小，达到紧凑显示的效果，从而使得大量选项能够在有限的空间中更好地展示。

2. Dense Menu 的基本用法

以下是一个使用 Dense menu 的简单示例：

import * as React from 'react';
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';

export default function DenseMenu() {
  return (
    <Paper sx={{ width: 320 }}>
      <MenuList dense>
        <MenuItem>
          <ListItemText inset>Single</ListItemText>
        </MenuItem>
        <MenuItem>
          <ListItemText inset>1.15</ListItemText>
        </MenuItem>
        <MenuItem>
          <ListItemText inset>Double</ListItemText>
        </MenuItem>
        <MenuItem>
          Custom: 1.2
        </MenuItem>
      </MenuList>
    </Paper>
  );
}

在这个示例中，dense 属性被应用于 MenuList 组件中，使菜单列表中的每个菜单项显示得更加紧凑。通过减少菜单项的高度，Dense menu 非常适合需要在有限空间中展示大量信息的场景。

3. 使用场景

• 文本编辑器：当有大量的文本格式选项需要展示时，如字体大小、行间距等，Dense menu 可以减少空间的占用。
• 设置菜单：在设置面板中，通常需要展示多个选项，而使用 Dense menu 能让界面更加整洁。

4. 注意事项

虽然 Dense menu 提供了紧凑的布局，但过度使用可能会降低菜单项的可读性。在设计时，需权衡布局紧凑性与用户可读性之间的平衡。

三、Selected Menu：增强交互体验的选项选择菜单

1. Selected Menu 的作用

Selected menu 适用于有选项选择需求的场景。当用户打开菜单时，菜单会默认将焦点放在已选中的选项上。这可以帮助用户快速定位已选择的内容，提高用户的交互效率。

2. Selected Menu 的基本用法

以下是 Selected menu 的代码示例：

import * as React from 'react';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import MenuItem from '@mui/material/Menu';
import Menu from '@mui/material/Menu';

const options = [
  'Show some love to MUI',
  'Show all notification content',
  'Hide sensitive notification content',
  'Hide all notification content',
];

export default function SimpleListMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [selectedIndex, setSelectedIndex] = React.useState(1);
  const open = Boolean(anchorEl);

  const handleClickListItem = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuItemClick = (event, index) => {
    setSelectedIndex(index);
    setAnchorEl(null);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <List component="nav" aria-label="Device settings" sx={{ bgcolor: 'background.paper' }}>
        <ListItemButton
          id="lock-button"
          aria-haspopup="listbox"
          aria-controls="lock-menu"
          aria-expanded={open ? 'true' : undefined}
          onClick={handleClickListItem}
        >
          <ListItemText primary="When device is locked" secondary={options[selectedIndex]} />
        </ListItemButton>
      </List>
      <Menu
        id="lock-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'lock-button',
          role: 'listbox',
        }}
      >
        {options.map((option, index) => (
          <MenuItem
            key={option}
            selected={index === selectedIndex}
            onClick={(event) => handleMenuItemClick(event, index)}
          >
            {option}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}

在这个示例中，selectedIndex 用于记录当前选中的菜单项。用户点击菜单项时，该菜单项的状态会被更新，并且菜单会关闭。Selected menu 通过 selected 属性突出显示已选中的选项。

3. 使用场景

• 设置面板：在设置选项中，比如用户隐私设置或显示选项，Selected menu 可帮助用户快速了解当前的设置状态。
• 选择列表：任何需要让用户从多个选项中选择一个选项的场景，都可以应用 Selected menu，以便在菜单打开时，直接定位到当前选中的选项。

4. 注意事项

• 初始选项的设置：Selected menu 默认会将焦点放在当前选中的选项上，因此确保在初始化时选项状态是正确的。
• 选项数量的控制：在 Selected menu 中，如果选项数量过多，可能会导致菜单项过长，影响用户体验。在这种情况下，可以考虑将选项分组或者使用分页来优化菜单的展示效果。

四、Dense Menu 和 Selected Menu 的结合

在一些复杂的应用场景中，我们可以将 Dense menu 和 Selected menu 结合使用。例如，当用户需要在大量选项中选择一个特定选项时，可以同时使用这两种菜单形式。Dense menu 能够紧凑地展示大量选项，而 Selected menu 则能帮助用户快速定位已选中的内容。

<MenuList dense>
  <MenuItem selected={true}>
    <ListItemText inset>Option 1</ListItemText>
  </MenuItem>
  <MenuItem>
    <ListItemText inset>Option 2</ListItemText>
  </MenuItem>
</MenuList>

这种结合方式既保证了菜单的紧凑布局，也增强了用户的交互体验。

五、总结

Material-UI 的 Dense menu 和 Selected menu 是两个非常实用的功能，它们各自适用于不同的场景。Dense menu 通过紧凑的布局适合展示大量选项，而 Selected menu 则通过选中状态的展示提升用户的操作体验。在实际开发中，合理地选择和组合这两种菜单模式，可以显著提升应用的用户体验。

推荐：

• JavaScript
• react
• vue

---