抽屜

顯示從螢幕邊緣滑入的面板，其中包含補充內容。

安裝

上面的命令僅適用於單獨安裝。如果 @nextui-org/react 已全局安裝，則可以跳過此步驟。

導入

NextUI 導出 5 個與抽屜相關的元件

• Drawer：用於顯示抽屜的主要元件。
• DrawerContent：其他抽屜元件的包裝器。
• DrawerHeader：抽屜的標頭。
• DrawerBody：抽屜的主體。
• DrawerFooter：抽屜的頁腳。

用法

當抽屜開啟時

• 焦點會被限制在抽屜內，並設定在第一個可使用 Tab 鍵瀏覽的元素上。
• 抽屜後面的內容是惰性的，這意味著使用者無法與其互動。

尺寸

不可關閉

預設情況下，可以透過點擊覆蓋層或按下 Esc 鍵來關閉抽屜。您可以設定以下屬性來停用此行為

• 設定 isDismissable 屬性為 false，以防止在點擊覆蓋層時關閉抽屜。
• 設定 isKeyboardDismissDisabled 屬性為 true，以防止在按下 Esc 鍵時關閉抽屜。

抽屜位置

抽屜可以使用 placement 屬性放置在螢幕的任何邊緣

• left (預設)
• right
• top
• bottom

使用表單

Drawer 會處理抽屜內容中的焦點。這表示您可以毫無問題地在抽屜中使用表單元素。當抽屜關閉時，焦點會返回到觸發器。

注意：您可以將 autoFocus 屬性新增到第一個 Input 元件，以便在抽屜開啟時將焦點移至該元件。

背景

Drawer 元件有一個 backdrop 屬性，可在抽屜後方顯示背景。背景可以是 transparent、opaque 或 blur。預設值為 opaque。

自訂動畫

抽屜提供 motionProps 屬性來自訂 enter / exit 動畫。

在此處深入瞭解 Framer 動畫變體 這裡。

自訂樣式

抽屜元件設計的靈感來自 Luma。

插槽

• wrapper：抽屜的 wrapper 插槽。它會包裝 base 和 backdrop 插槽。
• base：抽屜內容的主要插槽。
• backdrop：背景插槽，顯示在抽屜後面。
• header：抽屜的標頭，顯示在抽屜的頂部。
• body：抽屜的主體，顯示在抽屜的中間。
• footer：抽屜的頁尾，顯示在抽屜的底部。
• closeButton：抽屜的關閉按鈕。

資料屬性

Drawer 在 base 元素上具有下列屬性

• data-open：當抽屜開啟時。基於抽屜狀態。
• data-dismissable：當抽屜可關閉時。基於 isDismissable 屬性。

協助工具

• 在抽屜開啟時，輔助技術會隱藏抽屜外的內容。
• 選擇性地，當在外部互動或按下 Esc 鍵時，抽屜會關閉。
• 焦點會在掛載時移至抽屜內，並在卸載時還原到觸發元素。
• 在開啟時，焦點會包含在抽屜內，以防止使用者在外部使用 Tab 鍵。
• 在抽屜開啟時，會防止在抽屜後方滾動頁面，包括在行動瀏覽器中。

API

抽屜屬性

抽屜事件

抽屜類型

動態屬性