手风琴API

React 手风琴组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

手风琴

导入

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

阅读这篇关于最小化包大小的指南，了解差异。

属性

Paper 组件的属性也可用。

名称	类型	默认值	描述
children*	node	-	组件的内容。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
defaultExpanded	bool	false	如果为 `true`，则默认展开手风琴。
disabled	bool	false	如果为 `true`，则禁用该组件。
disableGutters	bool	false	如果为 `true`，则移除两个展开的手风琴项目之间的边距和高度的增加。
expanded	bool	-	如果为 `true`，则展开手风琴，否则折叠它。设置此属性可以控制手风琴。
onChange	func	-	当展开/折叠状态更改时触发的回调。签名:`function(event: React.SyntheticEvent, expanded: boolean) => void` `event` 回调的事件源。警告：这是一个通用事件，而不是更改事件。 `expanded` 手风琴的展开状态。
slotProps	{ heading?: func \| object, root?: func \| object, transition?: func \| object }	{}	用于内部每个插槽的属性。
slots	{ heading?: elementType, root?: elementType, transition?: elementType }	{}	用于内部每个插槽的组件。
square	bool	false	如果为 `true`，则禁用圆角。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
TransitionComponent	elementType	-	用于过渡的组件。请遵循本指南以了解有关此组件要求的更多信息。已弃用－请改用 `slots.transition`。此属性将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
TransitionProps	object	-	应用于过渡元素的属性。默认情况下，该元素基于此 `Transition` 组件。已弃用－请改用 `slotProps.transition`。此属性将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。

ref 被转发到根元素。

继承

虽然上面没有明确记录，但 Paper 组件的属性在 Accordion 中也可用。您可以利用这一点来定位嵌套组件。

主题默认属性

您可以使用 MuiAccordion 通过主题更改此组件的默认属性。

插槽

插槽名称	类名	默认组件	描述
root	.MuiAccordion-root	`Paper`	渲染根的组件。
heading	.MuiAccordion-heading	`'h3'`	渲染标题的组件。
transition		`折叠`	渲染过渡的组件。请遵循本指南以了解有关此组件要求的更多信息。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的插槽。

类名	规则名称	描述
.Mui-disabled		如果 disabled={true}，则应用于根元素的状态类。
.Mui-expanded		如果 expanded={true}，则应用于根元素的状态类。
.MuiAccordion-gutters	gutters	除非 disableGutters={true}，否则应用于根元素的样式。
.MuiAccordion-region	region	应用于区域元素（子元素的容器）的样式。
.MuiAccordion-rounded	rounded	除非 square={true}，否则应用于根元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

使用全局类名。
在自定义主题中，将规则名称作为组件的styleOverrides 属性的一部分。

源代码

如果您在此页面中没有找到所需信息，请考虑查看组件的实现以获取更多详细信息。