手风琴

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

简介

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 创作实践。

• 手风琴概要有一个根槽位 (div)，可以更改，例如根据手风琴的层次结构使用 h3。
• 手风琴概要包含一个带有 aria-expanded 和 aria-controls 属性的按钮。
• 手风琴详情包含一个带有 role="region" 和 aria-labelledby 属性的 div。

无样式

使用 Base UI Accordion 完全掌控组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此组件的无样式版本是需要重度自定义和更小捆绑包大小的理想选择。

API

请参阅下面的文档，以获得此处提及的组件的所有可用属性和类的完整参考。

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