折叠菜单（Accordion）

折叠菜单（Accordion）可展示一组高层级选项，展开/折叠后能显示更多信息。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入方式

HeroUI 提供了 2 个与折叠菜单相关的组件：

• Accordion：主组件，用于展示折叠菜单项列表。
• AccordionItem：子项组件，用于展示单个折叠菜单项。

用法

带副标题

展开多个项目

如果将 selectionMode 设为 multiple，则 Accordion 将允许同时展开多个项目。

紧凑模式

如果将 isCompact 设为 true，Accordion 将以紧凑样式显示。

变体样式

折叠菜单有 4 种变体：light（轻量）、shadow（阴影）、bordered（带边框）和 splitted（分割式）。

Light 变体

Shadow 变体

Bordered 变体

Splitted 变体

默认展开项

若要默认展开某些项目，可将 defaultExpandedKeys 属性设置为一个包含键名的数组。

禁用项

若要禁用某些项目，可将 disabledKeys 属性设置为一个包含键名的数组。

起始内容

若要在折叠菜单项前显示内容，可设置 startContent 属性。

自定义指示器

折叠菜单项有一个名为 indicator 的属性，可用于自定义展开/折叠指示器。

指示器也可以是接收 isOpen、isDisabled 和默认 indicator 作为参数的 function。

自定义动效

折叠菜单提供了 motionProps 属性，用于自定义 enter（进入）/ exit（退出）动画。

详细了解 Framer Motion 变体请访问此处。

受控模式

折叠菜单是受控组件，这意味着您需要自行控制 selectedKeys 属性。

折叠菜单项插槽

• base：折叠菜单项的包装器。
• heading：折叠菜单项标题。包含 indicator 和 title。
• trigger：用于展开/折叠菜单项的按钮。
• titleWrapper：title 和 subtitle 的包装器。
• title：折叠菜单项标题。
• subtitle：折叠菜单项副标题。
• startContent：折叠菜单项前显示的内容。
• indicator：指示折叠菜单项展开/折叠状态的元素。
• content：折叠菜单项内容。

自定义折叠菜单样式

您可通过以下任一属性自定义折叠菜单及其项的样式：

• className：折叠菜单的类名。用于修改折叠菜单包装器样式。（Accordion 组件）
• itemClasses：折叠菜单项的类名。用于同时修改所有折叠菜单项的样式。（Accordion 组件）
• classNames：折叠菜单项的类名。用于分别修改每个折叠菜单项的样式。（AccordionItem 组件）

以下示例展示了如何自定义折叠菜单样式：

数据属性

AccordionItem 在 base 元素上具有以下属性：

• data-open： 折叠菜单项是否展开。
• data-disabled： 折叠菜单项是否被禁用。
• data-hover： 折叠菜单项是否处于悬停状态。基于 useHover。
• data-focus： 折叠菜单项是否处于聚焦状态。基于 useFocusRing。
• data-focus-visible： 折叠菜单项是否通过键盘聚焦。基于 useFocusRing。
• data-disabled： 折叠菜单项是否被禁用。基于 isDisabled 属性。
• data-pressed： 折叠菜单项是否被按下。基于 usePress。

无障碍支持

• 支持 Space（空格）、Enter（回车）、Arrow Up（上箭头）、Arrow Down（下箭头）及 Home / End 键的键盘事件。
• 键盘焦点管理及跨浏览器标准化。
• 为折叠菜单项提供 aria-expanded 属性。
• 为折叠菜单项提供 aria-disabled 属性。
• 为折叠菜单项提供 aria-controls 属性。

API

Accordion 属性

Accordion 事件

Accordion Item 属性

Accordion Item 事件

类型定义

折叠菜单项指示器属性

折叠菜单项类名

动效属性