Accordion 手风琴

用法

import { Accordion } from '@heroui/react';

组件结构

import { Accordion } from '@heroui/react';

export default () => (
  <Accordion>
    <Accordion.Item>
      <Accordion.Heading>
        <Accordion.Trigger>
          <Accordion.Indicator />
        </Accordion.Trigger>
      </Accordion.Heading>
      <Accordion.Panel>
        <Accordion.Body/>
      </Accordion.Panel>
    </Accordion.Item>
  </Accordion>
)

示例

表面样式

无分隔线

多项展开

禁用状态

受控组件

自定义指示器

渲染函数

常见问题布局

自定义样式

Tailwind CSS

全局 CSS

若要自定义 Accordion 组件类，可使用 @layer components 指令。 了解更多。

@layer components {
  .accordion {
    @apply rounded-xl bg-gray-50;
  }

  .accordion__trigger {
    @apply font-semibold text-lg;
  }

  .accordion--outline {
    @apply shadow-lg border-2;
  }
}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Accordion 组件使用以下 CSS 类（查看源码样式）：

基础类

• .accordion - Accordion 根容器
• .accordion__body - 正文容器
• .accordion__heading - 标题包裹层
• .accordion__indicator - 展开/收起指示图标
• .accordion__item - 单个 Accordion 项
• .accordion__panel - 可折叠面板容器
• .accordion__trigger - 可点击的触发按钮

变体类

• .accordion--outline - 描边变体（边框与背景）

状态类

• .accordion__trigger[aria-expanded="true"] - 展开状态
• .accordion__panel[aria-hidden="false"] - 面板可见状态

交互状态

该组件同时支持 CSS 伪类与 data 属性：

• 悬停：触发器上 :hover 或 [data-hovered="true"]
• 聚焦：触发器上 :focus-visible 或 [data-focus-visible="true"]
• 禁用：触发器上 :disabled 或 [aria-disabled="true"]
• 展开：触发器上 [aria-expanded="true"]

API 参考

Accordion

Accordion.Item

Accordion.Trigger

Accordion.Panel

Accordion.Indicator

Accordion.Body

相关组件