DrawerAPI

React Drawer 組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。

範例

如需此 React 組件的使用範例和詳細資訊，請造訪組件範例頁面

Drawer

導入

import Drawer from '@mui/joy/Drawer';
// or
import { Drawer } from '@mui/joy';

閱讀此關於最小化 bundle 大小的指南，以了解差異。

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

Props

也提供原生組件的 Props。

名稱	類型	預設	描述
open*	bool	-	如果為 `true`，則顯示組件。
anchor	'bottom' \| 'left' \| 'right' \| 'top'	'left'	抽屜將從哪一側出現。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning'	'neutral'	組件的顏色。它支援適用於此組件的那些主題顏色。若要了解如何新增自己的顏色，請查看主題組件—擴展顏色。
component	elementType	-	用於根節點的組件。可以是字串（用於 HTML 元素）或組件。
container	HTML element \| func	-	一個 HTML 元素或傳回 HTML 元素的函式。`container` 將附加 portal 子元素。您也可以提供回呼函式，該函式會在 React layout effect 中呼叫。這可讓您從 ref 設定容器，並使伺服器端渲染成為可能。預設情況下，它使用最上層文件物件的 body，因此在大多數情況下它只是 `document.body`。
disableAutoFocus	bool	false	如果為 `true`，modal 在開啟時不會自動將焦點轉移到自身，並在關閉時將焦點放回最後一個聚焦的元素。這也適用於任何具有 `disableAutoFocus` prop 的 modal 子元素。一般來說，永遠不應將其設定為 `true`，因為這會降低 modal 對於輔助技術（如螢幕閱讀器）的可存取性。
disableEnforceFocus	bool	false	如果為 `true`，modal 在開啟時不會阻止焦點離開 modal。一般來說，永遠不應將其設定為 `true`，因為這會降低 modal 對於輔助技術（如螢幕閱讀器）的可存取性。
disableEscapeKeyDown	bool	false	如果為 `true`，按下 escape 鍵將不會觸發 `onClose` 回呼函式。
disablePortal	bool	false	`children` 將位於父組件的 DOM 階層下。
disableRestoreFocus	bool	false	如果為 `true`，modal 在隱藏或卸載後將不會將焦點恢復到先前聚焦的元素。
disableScrollLock	bool	false	停用滾動鎖定行為。
hideBackdrop	bool	false	如果為 `true`，則不會渲染 backdrop。
invertedColors	bool	false	如果為 `true`，具有隱含 color prop 的子元素會反轉其顏色，以符合組件的 variant 和 color。
onClose	func	-	當組件請求關閉時觸發的回呼函式。`reason` 參數可以選擇性地用於控制對 `onClose` 的回應。簽名:`function(event: object, reason: string) => void` `event` 回呼函式的事件來源。 `reason` 可以是：`"escapeKeyDown"`、`"backdropClick"`、`"closeClick"`。
size	'sm' \| 'md' \| 'lg'	'md'	組件的尺寸。若要了解如何新增自訂尺寸到組件，請查看主題組件—擴展尺寸。
slotProps	{ backdrop?: func \| object, content?: func \| object, root?: func \| object }	{}	用於每個 slot 內部的 props。
slots	{ backdrop?: elementType, content?: elementType, root?: elementType }	{}	用於每個 slot 內部的組件。請參閱下方的Slots API以了解更多詳細資訊。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid'	'plain'	要使用的全域 variant。若要了解如何新增自己的 variant，請查看主題組件—擴展 variant。

ref 會轉發到根元素。

Slots

若要了解如何自訂 slot，請查看覆寫組件結構指南。

Slot 名稱	類別名稱	預設組件	描述
root	.MuiDrawer-root	`'div'`	渲染 root 的組件。
backdrop	.MuiDrawer-backdrop	`'div'`	渲染 backdrop 的組件。
content	.MuiDrawer-content	`'div'`	渲染抽屜內容的組件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的 slot。

類別名稱	規則名稱	描述
.MuiDrawer-colorContext	colorContext	當觸發顏色反轉時，應用於根元素的類別名稱。
.MuiDrawer-colorDanger	colorDanger	如果 `color="danger"`，則應用於根元素的類別名稱。
.MuiDrawer-colorNeutral	colorNeutral	如果 `color="neutral"`，則應用於根元素的類別名稱。
.MuiDrawer-colorPrimary	colorPrimary	如果 `color="primary"`，則應用於根元素的類別名稱。
.MuiDrawer-colorSuccess	colorSuccess	如果 `color="success"`，則應用於根元素的類別名稱。
.MuiDrawer-colorWarning	colorWarning	如果 `color="warning"`，則應用於根元素的類別名稱。
.MuiDrawer-hidden	hidden	當 open 為 false 時，應用於根元素的類別名稱。
.MuiDrawer-sizeLg	sizeLg	如果 `size="lg"`，則應用於根元素的類別名稱。
.MuiDrawer-sizeMd	sizeMd	如果 `size="md"`，則應用於根元素的類別名稱。
.MuiDrawer-sizeSm	sizeSm	如果 `size="sm"`，則應用於根元素的類別名稱。
.MuiDrawer-variantOutlined	variantOutlined	如果 `variant="outlined"`，則應用於根元素的類別名稱。
.MuiDrawer-variantPlain	variantPlain	如果 `variant="plain"`，則應用於根元素的類別名稱。
.MuiDrawer-variantSoft	variantSoft	如果 `variant="soft"`，則應用於根元素的類別名稱。
.MuiDrawer-variantSolid	variantSolid	如果 `variant="solid"`，則應用於根元素的類別名稱。

您可以使用以下自訂選項之一來覆寫組件的樣式

使用全域類別名稱。
在自訂主題中，使用規則名稱作為組件的styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。