抽屉

导航抽屉提供对应用程序其他区域的快速访问，而不会将用户从当前位置带走。

简介

抽屉通常用作桌面导航的菜单，以及移动设备上的对话框（类似于 Apple 的 sheets）。

基础知识

import Drawer from '@mui/joy/Drawer';

用户做出选择、点击抽屉外部的任何位置或按下 Esc 键后，抽屉将关闭。

使用 open 属性来控制抽屉的打开和关闭状态的切换，如下面的演示所示

自定义

Anchor

使用 anchor 属性来指定抽屉应从屏幕的哪一侧滑出。默认值为 left。

Size

使用 size 属性来调整抽屉的宽度（当锚定到左侧或右侧时）或高度（当锚定到顶部或底部时）。

关闭按钮

使用 Modal Close 组件向抽屉添加一个关闭按钮，该按钮自动处理 onClick 事件。

import ModalClose from '@mui/joy/ModalClose';

<Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
  Open drawer
</Button>
<Drawer open={open} onClose={() => setOpen(false)}>
  <ModalClose />
  <DialogTitle>Title</DialogTitle>
</Drawer>

<Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
  Open drawer
</Button>
<Drawer open={open} onClose={() => setOpen(false)}>
  <ModalClose />
  <DialogTitle>Title</DialogTitle>
</Drawer>

按 Enter 开始编辑

过渡

通过在 sx 属性中使用以下 CSS 变量来自定义抽屉的打开过渡

--Drawer-transitionFunction：过渡函数；默认为 ease。
--Drawer-transitionDuration：过渡的持续时间；默认为 0.3s。

可滚动内容

使用 Dialog Content 组件在抽屉内部创建一个可滚动的容器。

import DialogContent from '@mui/joy/DialogContent';

常见示例

抽屉的一个常见用例是构建移动友好的导航菜单

嵌入式抽屉

嵌入式抽屉是一个未锚定到屏幕任何边缘的面板。

您可以通过将背景和内边距值应用于 Drawer 组件，并为全高包装器使用 Box 或 Sheet 组件来实现这一点，如下所示

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。

抽屉

简介

Playground