AccordionAPI

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

示範

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

Accordion

匯入

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

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

Props

Paper 元件的 props 也可使用。

名稱	類型	預設	描述
children*	node	-	元件的內容。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方的 CSS 類別 API 以了解更多詳細資訊。
defaultExpanded	bool	false	如果為 `true`，則預設展開 accordion。
disabled	bool	false	如果為 `true`，則停用元件。
disableGutters	bool	false	如果為 `true`，則移除兩個展開的 accordion 項目之間的邊距和高度增加。
expanded	bool	-	如果為 `true`，則展開 accordion，否則摺疊。設定此 prop 可啟用對 accordion 的控制。
onChange	func	-	當展開/摺疊狀態變更時觸發的回呼函式。簽名：`function(event: React.SyntheticEvent, expanded: boolean) => void` `event` 回呼的事件來源。警告：這是一般事件，而非變更事件。 `expanded` accordion 的展開狀態。
slotProps	{ heading?: func \| object, root?: func \| object, transition?: func \| object }	{}	用於每個內部插槽的 props。
slots	{ heading?: elementType, root?: elementType, transition?: elementType }	{}	用於每個內部插槽的元件。
square	bool	false	如果為 `true`，則停用圓角。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以了解更多詳細資訊。
TransitionComponent	elementType	-	用於轉場的元件。請遵循本指南以了解更多關於此元件的需求。已棄用－請改用 `slots.transition`。此 prop 將在 v7 中移除。請參閱從已棄用的 API 遷移以了解更多詳細資訊。
TransitionProps	object	-	套用至轉場元素的 props。預設情況下，元素基於此 `Transition` 元件。已棄用－請改用 `slotProps.transition`。此 prop 將在 v7 中移除。請參閱從已棄用的 API 遷移以了解更多詳細資訊。

ref 會轉發到根元素。

繼承

雖然上方未明確記載，但 Paper 元件的 props 也可在 Accordion 中使用。您可以利用此優勢來鎖定巢狀元件。

主題預設 props

您可以使用 MuiAccordion 透過主題變更此元件的預設 props。

插槽

插槽名稱	類別名稱	預設元件	描述
root	.MuiAccordion-root	`Paper`	呈現根的元件。
heading	.MuiAccordion-heading	`'h3'`	呈現標題的元件。
transition		`Collapse`	呈現轉場的元件。請遵循本指南以了解更多關於此元件的需求。

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-disabled		如果 `disabled={true}`，則套用至根元素的狀態類別。
.Mui-expanded		如果 `expanded={true}`，則套用至根元素的狀態類別。
.MuiAccordion-gutters	gutters	除非 `disableGutters={true}`，否則套用至根元素的樣式。
.MuiAccordion-region	region	套用至區域元素（children 的容器）的樣式。
.MuiAccordion-rounded	rounded	除非 `square={true}`，否則套用至根元素的樣式。

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

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

原始碼

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