跳到主要內容跳到主要內容
🚀 影響 Material UI 2025 年的開發藍圖！參與最新的開發者調查

SwipeableDrawerAPI

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

範例展示

Import

import SwipeableDrawer from '@mui/material/SwipeableDrawer';
// or
import { SwipeableDrawer } from '@mui/material';

閱讀這篇關於最小化 bundle size 的指南，以瞭解差異。

Props

Drawer 元件的 props 也可使用。

名稱類型預設值描述
onClose*func-

當元件請求關閉時觸發的回呼。

簽名：function(event: React.SyntheticEvent<{}>) => void
  • event 回呼的事件來源。
onOpen*func-

當元件請求開啟時觸發的回呼。

簽名：function(event: React.SyntheticEvent<{}>) => void
  • event 回呼的事件來源。
allowSwipeInChildrenfunc
| bool		false

若設定為 true，即使使用者在抽屜式導航列的子元件上開始滑動，滑動事件仍會開啟抽屜式導航列。這在抽屜式導航列部分可見的情況下非常有用。您可以使用回呼進一步自訂，以判斷使用者可以拖曳哪些子元件來開啟抽屜式導航列 (例如，忽略其他處理觸控移動事件的元素，如滑桿)。

childrennode-

元件的內容。

disableBackdropTransitionboolfalse

停用背景幕的過場效果。這可以改善低階裝置上的 FPS。

disableDiscoveryboolfalse

若 true，觸碰螢幕靠近抽屜式導航列邊緣處將不會稍微滑入抽屜式導航列，以避免意外發現滑動手勢。

disableSwipeToOpenbooltypeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)

若 true，則停用滑動開啟功能。這在滑動會觸發導航動作的瀏覽器中很有用。預設情況下，iOS 瀏覽器會停用滑動開啟功能。

hysteresisnumber0.52

影響抽屜式導航列必須開啟/關閉多遠才能變更其狀態。以抽屜式導航列寬度的百分比 (0-1) 指定

minFlingVelocitynumber450

定義從哪個 (平均) 速度開始，滑動被定義為完成，即使尚未達到 hysteresis。良好的閾值介於 250 - 1000 px/s 之間

openboolfalse

若 true，則會顯示元件。

slotProps{ backdrop?: func
| object, docked?: func
| object, paper?: func
| object, root?: func
| object, swipeArea?: func
| object, transition?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ backdrop?: elementType, docked?: elementType, paper?: elementType, root?: elementType, swipeArea?: elementType, transition?: elementType }{}

用於每個 slot 內部的元件。

SwipeAreaPropsobject-

此元素用於攔截邊緣的觸控事件。

swipeAreaWidthnumber20

最左側 (或最右側) 區域的寬度，單位為 px，可從該區域滑動開啟抽屜式導航列。

transitionDurationnumber
| { appear?: number, enter?: number, exit?: number }		{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }

過場效果的持續時間，以毫秒為單位。您可以為所有過場效果指定單一逾時，或使用物件個別指定。

ref 轉發到根元素。

繼承

雖然上面未明確說明，但 Drawer 元件的 props 也可在 SwipeableDrawer 中使用。您可以利用此優勢來鎖定巢狀元件。

Slots

Slot 名稱類別名稱預設元件描述
swipeAreadiv用於 swipeArea slot 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當特定狀態被觸發時，它們會套用至元件的 slots。

類別名稱規則名稱描述
.MuiDrawer-anchorBottomanchorBottom若 anchor="bottom"，則套用至根元素的樣式。
.MuiDrawer-anchorLeftanchorLeft若 anchor="left"，則套用至根元素的樣式。
.MuiDrawer-anchorRightanchorRight若 anchor="right"，則套用至根元素的樣式。
.MuiDrawer-anchorTopanchorTop若 anchor="top"，則套用至根元素的樣式。
.MuiDrawer-dockeddocked若 variant="permanent or persistent"，則套用至根元素的樣式。
.MuiDrawer-modalmodal套用至 Modal 元件的樣式。
.MuiDrawer-paperpaper套用至 Paper 元件的樣式。
.MuiDrawer-paperAnchorBottompaperAnchorBottom若 anchor="bottom"，則套用至 Paper 元件的樣式。
.MuiDrawer-paperAnchorDockedBottompaperAnchorDockedBottom若 anchor="bottom" 且 variant 不是 "temporary"，則套用至 Paper 元件的樣式。
.MuiDrawer-paperAnchorDockedLeftpaperAnchorDockedLeft若 anchor="left" 且 variant 不是 "temporary"，則套用至 Paper 元件的樣式。
.MuiDrawer-paperAnchorDockedRightpaperAnchorDockedRight若 anchor="right" 且 variant 不是 "temporary"，則套用至 Paper 元件的樣式。
.MuiDrawer-paperAnchorDockedToppaperAnchorDockedTop若 anchor="top" 且 variant 不是 "temporary"，則套用至 Paper 元件的樣式。
.MuiDrawer-paperAnchorLeftpaperAnchorLeft若 anchor="left"，則套用至 Paper 元件的樣式。
.MuiDrawer-paperAnchorRightpaperAnchorRight若 anchor="right"，則套用至 Paper 元件的樣式。
.MuiDrawer-paperAnchorToppaperAnchorTop若 anchor="top"，則套用至 Paper 元件的樣式。
.MuiDrawer-rootroot套用至根元素的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

原始碼

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