Accordion 手风琴

引入

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

用法

组件结构

引入 Accordion 组件并通过点语法访问所有子部分。

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>
)

Surface

多项同时展开

受控

自定义指示器

禁用状态

FAQ 布局

自定义样式

无分隔线

自定义渲染函数

样式

传入 Tailwind CSS 类

"use client";

import { Accordion, cn } from "@heroui/react";
import {Icon} from "@iconify/react";

自定义组件类

若要自定义 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 Props

Accordion.Item Props

Accordion.Trigger Props

Accordion.Panel Props

Accordion.Indicator Props

Accordion.Body Props