折疊API

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

示範

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

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

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

Collapse 轉場效果被 Vertical Stepper 的 StepContent 組件使用。它在內部使用 react-transition-group。

Transition 組件的 props 也可使用。

名稱	類型	預設值	描述
addEndListener	函式	-	新增自訂轉場結束觸發器。使用轉場中的 DOM 節點和 done 回呼呼叫。允許更細緻的轉場結束邏輯。注意：如果提供，Timeout 仍然會作為備用。
children	節點	-	要折疊的內容節點。
classes	物件	-	覆寫或擴展應用於組件的樣式。有關更多詳細資訊，請參閱下方的 CSS 類別 API。
collapsedSize	數字 \| 字串	'0px'	容器在折疊時的寬度（水平）或高度（垂直）。
component	元素類型	-	用於根節點的組件。可以是字串（使用 HTML 元素）或組件。這需要能夠持有 ref。
easing	{ enter?: 字串, exit?: 字串 } \| 字串	-	轉場效果時間函數。您可以指定單一 easing 或包含 enter 和 exit 值的物件。
in	布林值	-	如果為 `true`，組件將會轉場進入。
orientation	'horizontal' \| 'vertical'	'vertical'	轉場效果方向。
sx	Array<函式 \| 物件 \| 布林值> \| 函式 \| 物件	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。有關更多詳細資訊，請參閱 sx 頁面。
timeout	'auto' \| 數字 \| { appear?: 數字, enter?: 數字, exit?: 數字 }	duration.standard	轉場效果的持續時間，以毫秒為單位。您可以為所有轉場效果指定單一 timeout，或使用物件個別指定。設定為 'auto' 以根據高度自動計算轉場時間。

ref 被轉發到根元素。

雖然上面沒有明確記錄，但 react-transition-group 的 Transition 組件的 props 也可在 Collapse 中使用。您可以利用這一點來鎖定巢狀組件。

您可以使用 MuiCollapse 來變更此組件的預設 props（透過主題）。

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

類別名稱	規則名稱	描述
.MuiCollapse-entered	entered	當轉場效果進入時，應用於根元素的樣式。
.MuiCollapse-hidden	hidden	當轉場效果結束且 `collapsedSize` = 0px 時，應用於根元素的樣式。
.MuiCollapse-horizontal	horizontal	如果 `orientation="horizontal"`，則應用於根元素的狀態類別。
.MuiCollapse-root	root	應用於根元素的樣式。
.MuiCollapse-wrapper	wrapper	應用於外部 wrapper 元素的樣式。
.MuiCollapse-wrapperInner	wrapperInner	應用於內部 wrapper 元素的樣式。

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

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