AccordionAPI

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

範例

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

Accordion

Import

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

若要瞭解差異，請閱讀關於最小化套件大小的指南。

Props

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
accordionId	string	-	要在 AccordionDetails 中使用的 ID，由 AccordionSummary 控制。如果未提供，則會自動產生 ID。
children	node	-	用於在 Accordion 內部渲染圖示或文字元素，如果未設定 `src`。這可以是元素，或僅僅是字串。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning'	'neutral'	元件的顏色。它支援適用於此元件的主題顏色。若要瞭解如何新增自己的顏色，請查看主題元件—擴充顏色。
component	elementType	-	用於根節點的元件。可以是使用 HTML 元素的字串或元件。
defaultExpanded	bool	false	如果 `true`，則預設展開 accordion。
disabled	bool	false	如果 `true`，則元件停用。
expanded	bool	-	如果 `true`，則展開 accordion，否則摺疊。設定此 prop 可以控制 accordion。
onChange	func	-	展開/摺疊狀態變更時觸發的回呼。簽名：`function(event: React.SyntheticEvent, expanded: boolean) => void` `event` 回呼的事件來源。警告：這是一個通用事件，而非變更事件。 `expanded` accordion 的 `expanded` 狀態。
slotProps	{ root?: func \| object }	{}	用於內部每個 slot 的 props。
slots	{ root?: elementType }	{}	用於內部每個 slot 的元件。請參閱下方Slots API 以瞭解更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以瞭解更多詳細資訊。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid'	'plain'	要使用的全域變體。若要瞭解如何新增自己的變體，請查看主題元件—擴充變體。

ref 轉發到根元素。

主題預設 props

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

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.MuiAccordion-root	`'div'`	渲染 root 的元件。

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-disabled		如果 `disabled` 為 true，則套用至根元素的類別名稱。
.Mui-expanded		如果 `expanded` 為 true，則套用至根元素的類別名稱。

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

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

原始碼

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