手风琴 (Accordion)

手风琴组件用于展示可展开/折叠以显示更多信息的高级选项列表。(Accordion display a list of high-level options that can expand/collapse to reveal more information.)

安装 (Installation)

上述命令仅用于单独安装。如果 (The above command is for individual installation only. You may skip this step if) @heroui/react 已全局安装。(is already installed globally.)

导入 (Import)

HeroUI 导出 2 个与手风琴相关的组件 (HeroUI exports 2 accordion-related components)

• Accordion：用于显示手风琴项目列表的主要组件。(Accordion: The main component to display a list of accordion items.)
• AccordionItem：用于显示单个手风琴项目的项目组件。(AccordionItem: The item component to display a single accordion item.)

用法 (Usage)

带副标题 (With Subtitle)

展开多个项目 (Expand multiple items)

如果将 selectionMode 设置为 multiple，则 Accordion 将允许同时展开多个项目。(If you set selectionMode to multiple, then the Accordion will allow multiple items to be expanded at the same time.)

紧凑模式 (Compact)

如果将 isCompact 设置为 true，则 Accordion 将以紧凑样式显示。(If you set isCompact to true, the Accordion will be displayed in a compact style.)

变体 (Variants)

Accordion 有 4 种变体：light、shadow、bordered 和 splitted。(Accordion has 4 variants: light, shadow, bordered and splitted.)

轻量变体

阴影变体

带边框变体

分割变体

默认展开的键

如果您想默认展开某些项目，您可以将 defaultExpandedKeys 属性设置为键数组。

禁用的键

如果您想禁用某些项目，您可以将 disabledKeys 属性设置为键数组。

起始内容

如果您想在手风琴项目之前显示一些内容，您可以设置 startContent 属性。

自定义指示器

手风琴项目有一个名为 indicator 的属性。您可以使用它来自定义打开/关闭指示器。

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

自定义动画

手风琴提供 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。

无障碍访问

• 对 空格键、回车键、向上箭头键、向下箭头键 和 Home 键 / End 键 的键盘事件支持。
• 键盘焦点管理和跨浏览器规范化。
• 手风琴项目的 aria-expanded 属性。
• 手风琴项目的 aria-disabled 属性。
• 手风琴项目的 aria-controls 属性。

API

Accordion Props

Accordion Events

Accordion Item Props

Accordion Item Events

Types

Accordion Item Indicator Props

Accordion Item classNames

Motion Props