【Material-UI】Drawer 中的 Anchor 属性详解

Material-UI 是 React 生态中非常流行的 UI 框架，提供了丰富的组件来简化开发流程。其中，Drawer 组件用于实现滑出式的侧边栏，是许多应用中常见的功能。本文将详细介绍 Drawer 中的 Anchor 属性，帮助你灵活控制 Drawer 的显示位置。

一、Drawer 组件概述

1. 组件介绍

Drawer 组件是 Material-UI 提供的一个侧边栏组件，能够从屏幕的边缘滑出，用于显示导航菜单或其他内容。它可以让用户通过点击按钮或滑动手势来打开和关闭菜单，并且支持在页面任意一侧显示。

2. Anchor 属性的作用

Anchor 属性是 Drawer 组件中的一个重要属性，用于控制侧边栏从哪个方向出现。通过设置 Anchor，你可以决定 Drawer 是从页面的左边、右边、顶部还是底部滑出。默认情况下，Drawer 是从左边（left）滑出的。

Anchor 属性接受以下四个值：

• left：Drawer 从左侧滑出（默认值）。
• right：Drawer 从右侧滑出。
• top：Drawer 从顶部滑出。
• bottom：Drawer 从底部滑出。

二、Anchor 属性的基本用法

以下代码展示了如何使用 Anchor 属性控制 Drawer 的显示位置：

import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';

export default function AnchorTemporaryDrawer() {
  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false,
  });

  const toggleDrawer = (anchor, open) => (event) => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  const list = (anchor) => (
    <Box
      sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {['All mail', 'Trash', 'Spam'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Box>
  );

  return (
    <div>
      {['left', 'right', 'top', 'bottom'].map((anchor) => (
        <React.Fragment key={anchor}>
          <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
          <Drawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
          >
            {list(anchor)}
          </Drawer>
        </React.Fragment>
      ))}
    </div>
  );
}

在这个示例中，我们创建了四个按钮，每个按钮对应一个不同的 Anchor 值。点击按钮时，Drawer 将从相应的方向滑出。Drawer 的内容由一个列表和分割线组成，列表项包含一些图标和文本。

三、Anchor 属性的详细解析

1. left：左侧滑出

这是 Drawer 组件的默认值，常用于主导航菜单。将 anchor 设置为 left，意味着用户可以从屏幕左侧滑出侧边栏，适合一些需要占据页面大部分宽度的菜单或导航。

<Drawer
  anchor="left"
  open={state.left}
  onClose={toggleDrawer('left', false)}
>
  {list('left')}
</Drawer>

2. right：右侧滑出

当 anchor 设置为 right 时，Drawer 将从屏幕的右侧滑出。这个布局通常用于工具栏、聊天窗口或设置面板等，提供用户附加功能的访问入口。

<Drawer
  anchor="right"
  open={state.right}
  onClose={toggleDrawer('right', false)}
>
  {list('right')}
</Drawer>

3. top：顶部滑出

top 使 Drawer 从屏幕的顶部滑出，适合通知栏、过滤器面板等需要占据屏幕较少垂直空间的元素。顶部滑出的 Drawer 允许内容更加聚焦在当前上下文中。

<Drawer
  anchor="top"
  open={state.top}
  onClose={toggleDrawer('top', false)}
>
  {list('top')}
</Drawer>

4. bottom：底部滑出

底部滑出的 Drawer 通常用于移动设备上的操作面板或弹出式菜单。它能够更好地适配移动端用户的交互习惯，在页面底部显示相关操作。

<Drawer
  anchor="bottom"
  open={state.bottom}
  onClose={toggleDrawer('bottom', false)}
>
  {list('bottom')}
</Drawer>

四、Anchor 属性的实际应用场景

1. 左侧导航栏

在大多数网页应用中，左侧导航栏是最常见的布局形式。例如，一个典型的邮件客户端或管理系统通常会在页面左侧设置主导航，便于用户快速访问不同模块。通过将 Anchor 设置为 left，可以轻松实现这样的布局。

2. 右侧工具栏

右侧工具栏在许多应用中用于展示额外的选项或工具。例如，设计工具或文本编辑器通常会在右侧显示样式或格式选项。通过设置 Anchor 为 right，你可以为用户提供方便的功能区。

3. 顶部筛选器

在一些电子商务网站或数据分析平台中，顶部筛选器可以为用户提供过滤条件，帮助他们快速找到需要的数据。将 Anchor 设置为 top 可以为这样的场景提供良好的用户体验。

4. 底部菜单

底部菜单通常用于移动端应用。用户习惯于从屏幕底部滑出菜单，以执行常见操作，例如在社交媒体应用中发布内容，或在电商应用中查看购物车。

五、注意事项

1. 可访问性（Accessibility）

无论你选择哪个方向的 Drawer，都应确保内容对于所有用户是可访问的。在实现时，务必考虑无障碍访问性（a11y），为按钮和菜单项添加合适的 aria-label，使得使用屏幕阅读器的用户也能轻松操作。

2. 动画过渡效果

Material-UI 内置了过渡动画，使得 Drawer 滑出和关闭时更加流畅。你可以通过 TransitionComponent 属性自定义动画效果，增强用户体验。

3. 小屏设备上的适配

在移动端或小屏设备上，Drawer 的宽度可能会显得过大，因此需要根据屏幕大小调整 Drawer 的样式。可以通过 sx 属性或 styled 函数为不同的设备设置自适应样式。

六、总结

Material-UI 的 Drawer 组件是实现侧边栏功能的理想选择，通过 Anchor 属性，你可以灵活地控制侧边栏从不同方向滑出，以适应不同的设计需求。在开发中，合理使用 Anchor 属性，配合其他 Material-UI 组件，将为用户提供更好的交互体验。

推荐：

• JavaScript
• react
• vue

---