手风琴

手风琴组件允许用户在页面上显示和隐藏相关内容部分。

简介

Material UI 手风琴组件包含多个互补的实用组件，以处理各种用例

Accordion：用于分组相关组件的包装器。
Accordion Summary：Accordion 标题的包装器，单击时展开或折叠内容。
Accordion Details：Accordion 内容的包装器。
Accordion Actions：一个可选的包装器，用于组合一组按钮。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

基础

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.

默认展开

在 Accordion 组件上使用 defaultExpanded 属性使其默认打开。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

过渡

使用 slots.transition 和 slotProps.transition 属性来更改 Accordion 的默认过渡效果。

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.

受控的手风琴

Accordion 组件可以是受控的或非受控的。

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.

自定义

一次只展开一个

将 expanded 属性与 React 的 useState hook 结合使用，以允许一次只展开一个 Accordion 项。下面的演示还展示了一些视觉自定义。

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 使用 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>

性能

即使未展开，Accordion 内容默认也会被挂载。此默认行为考虑了服务器端渲染和 SEO。

如果您在 Accordion Details 中渲染了一个大型组件树，或者您有很多 Accordion，您可能希望通过在 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>

结构

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 的完整参考。

手风琴

手风琴 1

手风琴 2

手风琴 Actions

手风琴 1

手风琴 2

默认展开

标题

使用 Fade 的自定义过渡

使用 Collapse 的默认过渡

手风琴 1

手风琴 2

禁用的手风琴

常规设置我是一个手风琴

用户您当前不是所有者

高级设置整个 Web 服务器的过滤已被完全禁用

个人数据

可折叠组项 #1

可折叠组项 #2

可折叠组项 #3