手風琴
手風琴組件讓使用者可以在頁面上顯示和隱藏相關內容的區塊。
簡介
Material UI 手風琴組件包含數個互補的實用組件，以處理各種使用情境
- Accordion：用於將相關組件分組的包裝器。
- Accordion Summary：手風琴標題的包裝器，點擊時會展開或摺疊內容。
- Accordion Details：手風琴內容的包裝器。
- Accordion Actions：一個可選的包裝器，用於將一組按鈕分組。
基本用法
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
展開圖示
使用 Accordion Summary 組件上的 expandIcon 屬性來變更展開指示圖示。此組件會自動處理上下翻轉的轉場效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
預設展開
在 Accordion 組件上使用 defaultExpanded 屬性使其預設為開啟。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
轉場
使用 slots.transition 和 slotProps.transition 屬性來變更手風琴的預設轉場效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
已停用項目
在 Accordion 組件上使用 disabled 屬性來停用互動和焦點。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
受控手風琴
手風琴組件可以是受控或非受控的。
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget maximus est, id dignissim quam.
Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros, vitae egestas augue. Duis vel est augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
變更標題層級
預設情況下，手風琴使用 h3 元素作為標題。您可以使用 slotProps.heading.component 屬性來變更標題元素，以確保文件中標題層級的正確性。
<Accordion slotProps={{ heading: { component: 'h4' } }}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
Accordion
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
效能
即使手風琴內容未展開，預設也會掛載。此預設行為考慮了伺服器端渲染和 SEO。
如果您在 Accordion Details 中渲染一個大型組件樹，或者您有很多手風琴，您可能希望透過在 slotProps.transition 屬性中將 unmountOnExit 設定為 true 來變更此行為，以提高效能
<Accordion slotProps={{ transition: { unmountOnExit: true } }} />
無障礙功能
WAI-ARIA 手風琴指南建議設定 id 和 aria-controls，在這種情況下，這將適用於 Accordion Summary 組件。然後，Accordion 組件會從其內容中衍生出必要的 aria-labelledby 和 id。
<Accordion>
<AccordionSummary id="panel-header" aria-controls="panel-content">
Header
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</AccordionDetails>
</Accordion>
結構
手風琴組件由一個根 <div> 組成，其中包含 Accordion Summary、Accordion Details 和用於操作按鈕的可選 Accordion Actions。
<div class="MuiAccordion-root">
<h3 class="MuiAccordion-heading">
<button class="MuiButtonBase-root MuiAccordionSummary-root" aria-expanded="">
<!-- Accordion summary goes here -->
</button>
</h3>
<div class="MuiAccordion-region" role="region">
<div class="MuiAccordionDetails-root">
<!-- Accordion content goes here -->
</div>
</div>
</div>
API
請參閱以下文件，以取得此處提及的組件可用的所有 props 和 classes 的完整參考。