手風琴

手風琴元件讓使用者在頁面上顯示和隱藏相關內容的區塊。

簡介

Joy UI 提供了四個與手風琴相關的元件

• 手風琴群組 - 一個容器，用於將多個手風琴元件分組。它不控制每個手風琴元件的狀態。
• 手風琴 - 一個包含展開邏輯並發送到 AccordionSummary 和 AccordionDetails 的元件。
• 手風琴摘要 - 手風琴的標題，包含一個觸發展開的按鈕。
• 手風琴詳細內容 - 手風琴詳細內容的包裝器。

基本

import Accordion from '@mui/joy/Accordion';
import AccordionDetails from '@mui/joy/AccordionDetails';
import AccordionGroup from '@mui/joy/AccordionGroup';
import AccordionSummary from '@mui/joy/AccordionSummary';

自訂

尺寸

AccordionGroup 元件提供三種尺寸：sm、md (預設) 和 lg。

受控手風琴

使用 expanded 屬性來控制手風琴的展開狀態，並透過 onChange 屬性監聽展開事件。

已停用

使用 disabled 屬性來停用手風琴觸發器。

移除分隔線

在 Accordion Group 元件上使用 disableDivider 屬性來隱藏手風琴之間的分隔線。

動畫化展開

使用 transition 屬性來動畫化展開。如果您希望初始和展開狀態的轉場效果相同，則該值可以是字串；如果您想自訂每個狀態的轉場效果，則該值可以是物件。

物件值可以包含以下鍵

• initial：手風琴關閉時的轉場效果
• expanded：手風琴開啟時的轉場效果

指示器

使用 indicator 屬性來自訂手風琴的指示器。

展開時的樣式

在 AccordionGroup 上使用 sx 屬性來一次樣式化所有手風琴。

常見範例

深度面板

此範例示範如何自訂手風琴以建立線條和深度，使其看起來更逼真。

使用者設定

此範例示範如何自訂手風琴並使用其他元件製作多樣化的組合。

協助工具

手風琴的內建協助工具功能遵循 WAI-ARIA Authoring Practices。

• 手風琴摘要有一個根插槽 (div)，可以根據手風琴的階層結構進行更改，例如使用 h3。
• 手風琴摘要包含一個帶有 aria-expanded 和 aria-controls 屬性的按鈕。
• 手風琴詳細內容包含一個帶有 role="region" 和 aria-labelledby 屬性的 div。

無樣式

使用 Base UI Accordion 以完全掌控元件的設計，無需覆寫 Material UI 或 Joy UI 樣式。此無樣式版本的元件是高度自訂且套件大小較小的理想選擇。

API

請參閱以下文件，以完整參考此處提及的元件可用的所有屬性和類別。

• <Accordion />
• <AccordionDetails />
• <AccordionGroup />
• <AccordionSummary />