Slide（滑動）API
React Slide 元件的 API 參考文件。瞭解這個匯出模組的 props、CSS 和其他 API。
示範
Import（匯入）
import Slide from '@mui/material/Slide';
// or
import { Slide } from '@mui/material';閱讀這份關於最小化 bundle size 的指南，以了解差異。
Slide 轉場效果由 Drawer 元件使用。它在內部使用 react-transition-group。
Transition 元件的 props 也可使用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| children（子元素）* | element（元素） | - | 單一子內容元素。 |
| addEndListener（新增結束監聽器） | func（函式） | - | 新增自訂轉場結束觸發器。使用轉場中的 DOM 節點和完成回呼來呼叫。允許更精細的轉場結束邏輯。注意：如果提供，逾時仍用作後備方案。 |
| appear（出現） | bool（布林值） | true（真） | 如果 |
| container（容器） | HTML element（HTML 元素） | func（函式） | - | 一個 HTML 元素，或是一個返回 HTML 元素的函式。它用於設定 Slide 從哪個容器轉場。 |
| direction（方向） | 'down'（向下） | 'left'（向左） | 'right'（向右） | 'up'（向上） | 'down'（向下） | 子節點將從哪個方向進入。 |
| easing（緩和函數） | { enter?: string, exit?: string } | string（字串） | { enter: theme.transitions.easing.easeOut, exit: theme.transitions.easing.sharp, } | 轉場計時函數。您可以指定單一緩和函數，或是一個包含進入和離開值的物件。 |
| in（進入） | bool（布林值） | - | 如果為 |
| timeout（逾時） | number（數字） | { appear?: number, enter?: number, exit?: number } | { enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, } | 轉場的持續時間，以毫秒為單位。您可以為所有轉場指定單一逾時，或是使用物件個別指定。 |
ref 會轉發到根元素。Inheritance（繼承）
雖然上面沒有明確的文件說明，但 react-transition-group 的 Transition 元件的 props 也可在 Slide 中使用。您可以利用這一點來鎖定巢狀元件。
Source code（原始碼）
如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。