Collapse

基础布局

基于 Bootstrap 5 的 Collapse 折叠组件，通过高度或宽度过渡动画切换内容的显示与隐藏，支持垂直/水平两种折叠维度、多个目标联动、完整的事件回调与减少动态效果偏好，过渡状态由 useReducer 统一驱动，首次挂载的过渡动画通过双重 requestAnimationFrame 保证生效

Component Demo

Basic usage and examples of the Collapse component

基础用法

水平折叠

多个目标

事件回调

自定义时长

无障碍

API Documentation

Complete API reference for the Collapse component

Props

属性名	类型	默认值	描述
`in`	`boolean`	-	受控的展开状态，为 true 时展开内容，为 false 时折叠内容并在过渡结束后卸载
`dimension`	`CollapseDimension`	`'height'`	折叠维度，'height' 为垂直折叠（高度过渡），'width' 为水平折叠（宽度过渡，对应 Bootstrap 的 collapse-horizontal）
`duration`	`number`	`300`	展开与折叠过渡动画时长（毫秒），系统开启减少动态效果时自动为 0
`onEnter`	`() => void`	-	展开开始（show）时触发，此时元素即将挂载并开始测量内容尺寸
`onEntering`	`() => void`	-	展开过渡开始（元素已挂载并完成尺寸测量，高度/宽度开始过渡）时触发
`onEntered`	`() => void`	-	展开过渡完成（shown）时触发，此时元素尺寸恢复为 auto，内容可自然撑开
`onExit`	`() => void`	-	折叠开始（hide）时触发，此时会先测量并冻结当前尺寸再开始收缩
`onExiting`	`() => void`	-	折叠过渡开始（尺寸开始向 0 收缩）时触发
`onExited`	`() => void`	-	折叠过渡完成（hidden）时触发，此时元素已卸载
`children`	`ReactNode`	-	折叠内容
`className`	`string`	-	自定义类名
`...rest`	`HTMLAttributes`	-	透传原生 div 元素的所有属性（如 id、role、aria-* 等）

Type Definitions

CollapseDimension

Collapse 折叠维度类型

export type CollapseDimension = 'height' | 'width';

CollapseAnimationStatus

Collapse 过渡动画状态类型

export type CollapseAnimationStatus = 'closed' | 'closing' | 'opened' | 'opening';

CollapseProps

Collapse 组件属性接口

export interface CollapseProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
  className?: string;
  dimension?: CollapseDimension;
  duration?: number;
  in: boolean;
  onEnter?: () => void;
  onEntered?: () => void;
  onEntering?: () => void;
  onExit?: () => void;
  onExited?: () => void;
  onExiting?: () => void;
}