CollapseAPI

React Collapse 组件的 API 参考文档。了解这个导出的模块的 props、CSS 和其他 API。

演示

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

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

Collapse 过渡由垂直 Stepper StepContent 组件使用。它在内部使用 react-transition-group。

Transition 组件的属性也可用。

名称	类型	默认值	描述
addEndListener	func	-	添加自定义过渡结束触发器。使用过渡 DOM 节点和 done 回调调用。允许更精细的过渡结束逻辑。注意：如果提供超时，仍然用作后备。
children	node	-	要折叠的内容节点。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的CSS 类 API。
collapsedSize	number \| string	'0px'	容器折叠时的宽度（水平方向）或高度（垂直方向）。
component	element type	-	用于根节点的组件。可以是用于 HTML 元素的字符串或组件。这个需要能够容纳 ref。
easing	{ enter?: string, exit?: string } \| string	-	过渡 timing 函数。您可以指定单个 easing 或包含 enter 和 exit 值的对象。
in	bool	-	如果 `true`，组件将过渡进入。
orientation	'horizontal' \| 'vertical'	'vertical'	过渡方向。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅 `sx` 页面。
timeout	'auto' \| number \| { appear?: number, enter?: number, exit?: number }	duration.standard	过渡的持续时间，以毫秒为单位。您可以为所有过渡指定单个超时，也可以使用对象单独指定。设置为 'auto' 以根据高度自动计算过渡时间。

ref 被转发到根元素。

虽然上面没有明确文档说明，但 react-transition-group 的 Transition 组件的属性在 Collapse 中也可用。您可以利用这一点来定位嵌套组件。

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

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

类名	规则名称	描述
.MuiCollapse-entered	entered	当过渡进入时，应用于根元素的样式。
.MuiCollapse-hidden	hidden	当过渡退出且 `collapsedSize` = 0px 时，应用于根元素的样式。
.MuiCollapse-horizontal	horizontal	如果 `orientation="horizontal"`，则应用于根元素的状态类。
.MuiCollapse-root	root	应用于根元素的样式。
.MuiCollapse-wrapper	wrapper	应用于外部 wrapper 元素的样式。
.MuiCollapse-wrapperInner	wrapperInner	应用于内部 wrapper 元素的样式。

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

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