抽屜

導航抽屜提供快速存取應用程式其他區域的方式，而不會將使用者從目前的位置移開。

簡介

抽屜常用於桌面導航的選單，以及行動裝置上的對話框（類似於 Apple 的 sheets）。

基本

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

使用者進行選擇、點擊抽屜外任何位置或按下 Esc 鍵後，抽屜將會關閉。

使用 open 屬性來控制抽屜的開啟和關閉狀態切換，如下面的示範所示

客製化

錨點

使用 anchor 屬性來指定抽屜應從螢幕的哪一側出現。預設值為 left。

尺寸

使用 size 屬性來調整抽屜的寬度（當錨定在左側或右側時）或高度（當錨定在頂部或底部時）。

關閉按鈕

使用 Modal Close 元件來為抽屜新增一個關閉按鈕，該按鈕會自動處理 onClick 事件。

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

轉場效果

透過在 sx 屬性 內使用以下 CSS 變數來自訂抽屜的開啟轉場效果

• --Drawer-transitionFunction：轉場函式；預設值為 ease。
• --Drawer-transitionDuration：轉場持續時間；預設值為 0.3s。

可捲動內容

使用 Dialog Content 元件在抽屜內建立可捲動的容器。

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

常見範例

行動導航

抽屜的一個常見使用案例是建置行動裝置友善的導航選單

內嵌抽屜

內嵌抽屜是一個未錨定到螢幕任何邊緣的面板。

您可以透過將背景和內距值套用至 Drawer 元件，並使用 Box 或 Sheet 元件作為全高包裝器來實現此目的，如下所示

API

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

• <DialogContent />
• <Drawer />
• <ModalClose />