深入理解 React MUI Drawer API

MUI 是一个强大的用户界面库，它提供了预定义且可定制的 React 组件，旨在帮助我们实现更快速、更便捷的 Web 开发。MUI 提供了一套全面的 UI 工具，助力我们更高效地交付新功能。在本文中，让我们深入探讨由 MUI 库提供的 Drawer API。

Drawer 组件本质上是一个从屏幕边缘滑入的面板。它通常用于显示多个导航链接。我们可以打开 Drawer 来执行一个或多个操作，当它关闭时，面板会再次滑回屏幕边缘。通过这种方式，它有效地帮助减少了 UI 界面的混乱。在本文中，我们将学习 MUI Drawer API，它是 Drawer 组件的核心支柱。

语法

    Foo
    Bar

创建 React 应用

第1步：使用 create-react-app 初始化应用。

npx create-react-app myApp

第2步：进入项目目录。

cd myApp

安装 MUI

我们可以使用 npm 或 yarn 等包管理器轻松安装它。

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

或者

yarn add @mui/material @emotion/react @emotion/styled

将 MUI Drawer API 导入项目

import Drawer from ‘@mui/material/Drawer‘;
// 或者
import { Drawer } from ‘@mui/material‘;

Props 列表

• anchor: 它指定 Drawer 从屏幕的哪一侧出现。它可以是四个值之一——left（左）、right（右）、top（上）或 bottom（下）。
• children: 它是 Drawer 组件的内容。
• classes: 用于覆盖或扩展应用于组件的样式。
• elevation: 它赋予 Drawer 海拔高度，即 Drawer 被提升的高度。默认值为 16。
• hideBackdrop: 这是一个布尔值，用于指示是否应隐藏背景遮罩。如果设置为 true，则不会渲染背景遮罩。
• onClose: 这是一个回调函数，当 Drawer 请求关闭时触发。
• open: 这是一个布尔值，用于告知 Drawer 是否处于打开状态。默认为 false。如果设置为 true，Drawer 将会显示。
• sx: 这是系统属性。它允许我们为组件定义额外的 CSS 样式。
• transitionDuration: 它是过渡动画的持续时间（以毫秒为单位）。我们可以为所有过渡应用一个超时时间，也可以单独设置。
• variant: 它指定要显示的 Drawer 变体类型。它可以是 permanent（永久）、persistent（持久）或 temporary（临时）变体。默认情况下为 temporary。
• 除了上述列出的 props 之外，ModalProps、PaperProps 和 SlideProps 的所有 props 也会应用于 Drawer 组件。

CSS 规则

• root: 应用于根元素的样式。全局类名为 .MuiDrawer-root。
• docked: 此 CSS 规则规定，仅当 Drawer 的 variant 为 permanent 或 persistent 时，才将样式应用于根元素。
• paper: 样式将应用于 Paper 组件。全局类名为 .MuiDrawer-paper。
• paperAnchorLeft: 此规则规定，仅当 anchor 设置为 left 时，才将样式应用于 Paper 组件。
• paperAnchorRight: 此规则规定，仅当 anchor 设置为 right 时，才将样式应用于 Paper 组件。
• paperAnchorTop: 此规则规定，仅当 anchor 设置为 top 时，才将样式应用于 Paper 组件。
• paperAnchorBottom: 此规则规定，仅当 anchor 设置为 bottom 时，才将样式应用于 Paper 组件。
• paperAnchorDockedLeft: 此规则规定，仅当 anchor 设置为 left 且 variant 设置为 permanent 或 persistent 时，才将样式应用于 Paper 组件。
• paperAnchorDockedTop: 此规则规定，仅当 anchor 设置为 top 且 variant 设置为 permanent 或 persistent 时，才将样式应用于 Paper 组件。
• paperAnchorDockedRight: 此规则规定，仅当 anchor 设置为 right 且 variant 设置为 permanent 或 persistent 时，才将样式应用于 Paper 组件。
• paperAnchorDockedBottom: 此规则规定，仅当 anchor 设置为 bottom 且 variant 设置为 permanent 或 persistent 时，才将样式应用于 Paper 组件。
• modal: 它定义应用于 Modal 组件的样式。

示例 1

在这个例子中，我们将创建一个临时的 drawer，它像模态框一样在页面所有内容之上打开，并带有阴影背景。它可以被切换打开或关闭状态。默认情况下，临时 drawer 是关闭的。让我们使用 MUI 的 Drawer API 创建一个基本的临时 drawer。

import * as React from "react";
import Drawer from "@mui/material/Drawer";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";

export default function DrawerExample() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = (newOpen) => () => {
    setOpen(newOpen);
  };

  return (
    

      打开 Drawer
      
        首页
        个人资料
        设置
      
    
  );
}