React Material 是一款基于 React 的 UI 库，其中提供了很多实用的组件，@react.material/drawer 就是其中之一。它提供了一个侧边栏的组件，帮助我们快速地实现一个简单的侧边栏。
安装
在使用 @react.material/drawer 之前，我们需要先安装它。可以使用 npm 来安装：
npm install @react.material/drawer
引入
@react.material/drawer 库中只有一个 Drawer 组件，所以要使用它，我们需要先引入它：
import Drawer from "@react.material/drawer";
使用
Drawer 组件比较简单，只有几个必要的属性，让我们看一下如何使用它：
-- -------------------- ---- -------
------ ------ ---- -------------------------
-------- ----- -
----- ------ -------- - ----------------
----- ------------ - -- -- -
---------------
--
------ -
--
------- ----------------------------- ---------------
------- ----------- -----------------------
---- -------- -------- ------ ---
---------- ------------
------- -- --- ------- -- --- -----------
------
---------
---
--
-在这里，我们定义了一个 App 组件，其中包含了一个按钮，点击该按钮可以切换 Drawer 的显示状态。Drawer 组件的 open 属性用来控制 Drawer 的显示与隐藏，onClose 属性则用来指定关闭 Drawer 的回调函数。
Drawer 组件本身是一个包裹在一个 div 中的组件，我们可以在其中放置任意的 JSX 元素来实现我们想要的界面。
属性
Drawer 组件包含了一些可选属性，让我们逐一来看看它们：
open
- 类型：
boolean - 是否必须：是
- 默认值：
false
该属性用来控制 Drawer 是否显示。若为 true，则 Drawer 将会被显示出来，反之则会被隐藏。
onClose
- 类型：
Function - 是否必须：否
- 默认值：
() => {}
该属性用来指定关闭 Drawer 的回调函数。当用户点击 Drawer 内部的关闭按钮，或者点击遮罩层时，都会触发此回调函数。
anchor
- 类型：
"left" | "right" - 是否必须：否
- 默认值：
"left"
该属性用来控制 Drawer 的对齐方式，可选值为 "left" 和 "right"，前者表示从左侧弹出，后者则表示从右侧弹出。
hideBackdrop
- 类型：
boolean - 是否必须：否
- 默认值：
false
该属性用来控制是否隐藏 Drawer 外部的遮罩层。
fixed
- 类型：
boolean - 是否必须：否
- 默认值：
false
该属性用来控制 Drawer 是否固定在页面中，不随页面滚动而滚动。
variant
- 类型：
"temporary" | "persistent" - 是否必须：否
- 默认值：
"temporary"
该属性用来控制 Drawer 的类型，可选值为 "temporary" 和 "persistent"，前者表示临时 Drawer，后者则表示持久 Drawer。
width
- 类型：
number | string - 是否必须：否
- 默认值：
256
该属性用来控制 Drawer 的宽度，可以是一个数字，也可以是一个带有单位的字符串，比如 "50%"。
结语
@react.material/drawer 提供了一个非常方便的 Drawer 组件，帮助我们快速地实现一个简单的侧边栏。在使用时，要注意各个属性的含义和用法，以便更好地满足自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9e81e8991b448e7630