手风琴

手风琴显示一个高级选项列表，可以展开/折叠以显示更多信息。

安装

以上命令仅用于单独安装。如果 @nextui-org/react 已全局安装，则可以跳过此步骤。

导入

NextUI 导出 2 个与手风琴相关的组件

• Accordion：用于显示手风琴项目列表的主要组件。
• AccordionItem：用于显示单个手风琴项目的项目组件。

用法

带副标题

展开多个项目

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

紧凑

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

变体

手风琴有 4 种变体：light、shadow、bordered 和 splitted。

Light 变体

Shadow 变体

带边框变体

分割变体

默认展开的键

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

禁用的键

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

起始内容

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

自定义指示器

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

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

自定义动画

手风琴提供一个 motionProps 属性来自定义 enter / exit 动画。

在此处了解有关 Framer 动画变体的更多信息 此处。

受控的

手风琴是一个受控组件，这意味着您需要自己控制 selectedKeys 属性。

手风琴项目插槽

• base：手风琴项目包装器。
• heading：手风琴项目标题。它包含 indicator 和 title。
• trigger：打开/关闭手风琴项目的按钮。
• titleWrapper：title 和 subtitle 的包装器。
• title：手风琴项目标题。
• subtitle：手风琴项目副标题。
• startContent：手风琴项目之前的内容。
• indicator：指示手风琴项目打开/关闭状态的元素。
• content：手风琴项目内容。

自定义手风琴样式

您可以使用以下任何属性来自定义手风琴和手风琴项目的样式

• className：手风琴的类名。修改手风琴包装器样式。（手风琴）
• itemClasses：手风琴项目的类名。一次性修改所有手风琴项目的样式。（手风琴）
• classNames：手风琴项目的类名。分别修改每个手风琴项目的样式。（手风琴项目）

以下是如何自定义手风琴样式的一个示例

数据属性

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

手风琴属性

手风琴事件

手风琴项目属性

手风琴项目事件

类型

手风琴项目指示器属性

手风琴项目 classNames

运动属性