抽屉

导航抽屉（或“侧边栏”）为站点或应用程序功能（例如切换帐户）中的目标位置提供了符合人体工程学的访问方式。

导航抽屉可以永久显示在屏幕上，也可以通过导航菜单图标进行控制。

侧边栏是主要用于平板电脑和桌面设备的补充表面。

临时抽屉

临时导航抽屉可以切换打开或关闭。默认情况下为关闭状态，抽屉会在所有其他内容之上临时打开，直到选择某个部分。

可以通过单击叠加层或按 Esc 键取消抽屉。当选择一个项目时，抽屉会关闭，这通过控制 open prop 来处理。

<Button onClick={toggleDrawer(true)}>Open drawer</Button>
<Drawer open={open} onClose={toggleDrawer(false)}>
  {DrawerList}
</Drawer>

<Button onClick={toggleDrawer(true)}>Open drawer</Button>
<Drawer open={open} onClose={toggleDrawer(false)}>
  {DrawerList}
</Drawer>

按 Enter 键开始编辑

锚点

使用 anchor prop 来指定抽屉应从屏幕的哪一侧开始。

默认值是 left。

{(['left', 'right', 'top', 'bottom'] as const).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>
))}

{(['left', 'right', 'top', 'bottom'] as const).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>
))}

按 Enter 键开始编辑

可滑动

你可以使用 SwipeableDrawer 组件使抽屉可滑动。

此组件带有 2 kB gzip 压缩后的有效负载开销。一些低端移动设备将无法以 60 FPS 的速度跟随手指。你可以使用 disableBackdropTransition prop 来帮助解决。

{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
  <React.Fragment key={anchor}>
    <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
    <SwipeableDrawer
      anchor={anchor}
      open={state[anchor]}
      onClose={toggleDrawer(anchor, false)}
      onOpen={toggleDrawer(anchor, true)}
    >
      {list(anchor)}
    </SwipeableDrawer>
  </React.Fragment>
))}

{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
  <React.Fragment key={anchor}>
    <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
    <SwipeableDrawer
      anchor={anchor}
      open={state[anchor]}
      onClose={toggleDrawer(anchor, false)}
      onOpen={toggleDrawer(anchor, true)}
    >
      {list(anchor)}
    </SwipeableDrawer>
  </React.Fragment>
))}

按 Enter 键开始编辑

以下属性用于此文档网站，以优化组件的可用性

iOS 托管在高端设备上。可以启用幕布过渡，而不会掉帧。性能将足够好。
iOS 具有“滑动返回”功能，该功能会干扰发现功能，因此必须禁用发现功能。

const iOS =
  typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);

<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />;

可滑动边缘

你可以配置 SwipeableDrawer 在关闭时具有可见的边缘。

如果你在桌面上，你可以使用“打开”按钮切换抽屉。如果你在移动设备上，你可以在 CodeSandbox（“编辑”图标）中打开演示并滑动。

保持挂载

Swipeable Drawer 内部使用的 Modal 默认设置了 keepMounted prop。这意味着抽屉的内容始终存在于 DOM 中。

你可以使用 ModalProps prop 更改此默认行为，但你可能会在 React 18 中遇到 keepMounted: false 的问题。

<Drawer
  variant="temporary"
  ModalProps={{
    keepMounted: false,
  }}
/>

响应式抽屉

你可以使用 temporary variant 来为小屏幕显示抽屉，并使用 permanent 为更宽的屏幕显示抽屉。

持久抽屉

持久导航抽屉可以切换打开或关闭。抽屉与内容位于同一表面高度。默认情况下为关闭状态，通过选择菜单图标打开，并保持打开状态直到用户关闭。抽屉的状态从一个操作到另一个操作以及从一个会话到另一个会话都会被记住。

当抽屉在页面网格之外并打开时，抽屉会强制其他内容更改大小并适应较小的视口。

持久导航抽屉适用于所有大于移动设备的尺寸。不建议用于具有多个层级结构且需要使用向上箭头进行导航的应用。

迷你变体抽屉

在这种变体中，持久导航抽屉会改变其宽度。其静止状态是作为与内容高度相同的迷你抽屉，被应用栏裁剪。展开后，它显示为标准持久导航抽屉。

迷你变体推荐用于需要在内容旁边进行快速选择访问的应用部分。

永久抽屉

永久导航抽屉始终可见并固定在左边缘，与内容或背景位于同一高度。它们无法关闭。

永久导航抽屉是推荐的桌面默认设置。

专注于信息消费且使用从左到右层级结构的应用。

在应用栏下裁剪

专注于生产力且需要在屏幕上保持平衡的应用。

实验性 API - Toolpad

Dashboard Layout

来自 @toolpad/core 的 DashboardLayout 组件是仪表板应用程序的起点。它负责应用程序布局、主题、导航等。此组件的示例用法

API

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