抽屜式導航

導覽抽屜（或「側邊欄」）提供符合人體工學的方式，存取網站或應用程式功能中的目的地，例如切換帳戶。

導覽抽屜可以永久顯示在螢幕上，或由導覽選單圖示控制。

側邊欄主要是用於平板電腦和桌上型電腦上的輔助介面。

暫時性抽屜式導航

暫時性導覽抽屜可以切換開啟或關閉。預設為關閉，抽屜會在所有其他內容上方暫時開啟，直到選取某個區段。

可以透過點擊覆蓋層或按下 Esc 鍵取消抽屜。當選取項目時，它會關閉，這由控制 open 屬性來處理。

<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 屬性來指定抽屜應從螢幕的哪一側開始滑出。

預設值為 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 gzipped 酬載開銷。某些低階行動裝置可能無法以 60 FPS 的速度跟上手指。您可以使用 disableBackdropTransition 屬性來協助。

{(['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 配置為在關閉時具有可見的邊緣。

如果您在桌上型電腦上，可以使用「OPEN」按鈕切換抽屜。如果您在行動裝置上，可以在 CodeSandbox 中開啟演示（「編輯」圖示）並滑動。

保持掛載

Swipeable Drawer 內部使用的 Modal 預設設定了 keepMounted 屬性。這表示抽屜的內容始終存在於 DOM 中。

您可以使用 ModalProps 屬性變更此預設行為，但在 React 18 中使用 keepMounted: false 時可能會遇到問題。

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

響應式抽屜式導航

您可以使用 temporary 變體在小型螢幕上顯示抽屜，並在較寬螢幕上使用 permanent 變體顯示抽屜。

持續性抽屜式導航

持續性導覽抽屜可以切換開啟或關閉。抽屜位於與內容相同的表面高度上。預設為關閉，並在選取選單圖示時開啟，並保持開啟狀態直到使用者關閉。抽屜的狀態會從一個動作到另一個動作以及從一個會期到另一個會期被記住。

當抽屜位於頁面網格之外並開啟時，抽屜會強制其他內容變更大小並適應較小的視口。

持續性導覽抽屜適用於所有大於行動裝置的尺寸。不建議用於具有多層次結構的應用程式，這些應用程式需要使用向上箭頭進行導航。

迷你變體抽屜式導航

在此變體中，持續性導覽抽屜會變更其寬度。其靜止狀態是作為與內容相同高度的迷你抽屜，並由應用程式列裁剪。展開時，它會顯示為標準的持續性導覽抽屜。

迷你變體建議用於需要快速選取存取內容的應用程式區段。

永久性抽屜式導航

永久性導覽抽屜始終可見並固定在左邊緣，與內容或背景位於相同的高度。它們無法關閉。

永久性導覽抽屜是桌上型電腦的建議預設值。

專注於資訊消費且使用由左至右層次結構的應用程式。

裁剪於應用程式列下方

專注於生產力且需要在螢幕之間取得平衡的應用程式。

實驗性 API - Toolpad

儀表板版面配置

來自 @toolpad/core 的 DashboardLayout 元件是儀表板應用程式的起點。它負責處理應用程式版面配置、主題、導航等等。此元件的使用範例

API

請參閱以下文件，以取得此處提及之元件的所有可用屬性和類別的完整參考。