引入

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

用法

import {
  ArrowsRotateLeft,
  Box,
  ChevronDown,
  CreditCard,

组件结构

引入 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

import {
  ArrowsRotateLeft,
  Box,
  ChevronDown,
  CreditCard,

多项同时展开

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

export function Multiple() {
  return (
    <Accordion allowsMultipleExpanded className="w-full max-w-md">

受控

已展开：getting-started

了解 HeroUI 的基础知识，以及如何将其集成到你的 React 项目中。本节涵盖安装、配置和你的第一个组件。

"use client";

import {ChevronDown, ChevronUp} from "@gravity-ui/icons";
import {Accordion, Button, useDisclosureGroupNavigation} from "@heroui/react";
import React from "react";

自定义指示器

"use client";

import type {Key} from "@heroui/react";

import {ChevronsDown, CircleChevronDown, Minus, Plus} from "@gravity-ui/icons";

禁用状态

整个手风琴禁用

单独禁用条目

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

export function Disabled() {
  return (
    <div className="flex w-full flex-col items-center gap-8">

FAQ 布局

常见问题

关于许可与使用，你需要了解的内容都在这里。

常规

许可

支持

import {ChevronDown} from "@gravity-ui/icons";
import {Accordion} from "@heroui/react";

export function FAQ() {
  const categories = [

自定义样式

import {ChevronDown} from "@gravity-ui/icons";
import {Accordion, cn} from "@heroui/react";

const items = [
  {

无分隔线

import {ChevronDown, CreditCard, Receipt, ShoppingBag} from "@gravity-ui/icons";
import {Accordion} from "@heroui/react";

const items = [
  {

自定义渲染函数

如何下单？

可以修改或取消订单吗？

支持哪些支付方式？

运费如何计算？

是否提供国际配送？

如何申请退款？

"use client";

import {
  ArrowsRotateLeft,
  Box,

Related Components

DisclosureGroup

Disclosure

样式

传入 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

Prop	类型	默认值	描述
`allowsMultipleExpanded`	`boolean`	`false`	是否允许多项同时展开。
`defaultExpandedKeys`	`Iterable<Key>`	-	初始展开的 key。
`expandedKeys`	`Iterable<Key>`	-	受控的展开 key。
`onExpandedChange`	`(keys: Set<Key>) => void`	-	展开 key 变化时调用的事件处理函数。
`isDisabled`	`boolean`	`false`	是否禁用整个 Accordion。
`variant`	`"default" \| "surface"`	`"default"`	Accordion 的视觉变体。
`hideSeparator`	`boolean`	`false`	是否隐藏 Accordion 项之间的分隔线。
`className`	`string`	-	额外的 Tailwind CSS 类。
`children`	`ReactNode`	-	Accordion 项。
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionRenderProps>`	-	使用自定义渲染函数覆盖默认 DOM 元素。

Accordion.Item Props

Prop	类型	默认值	描述
`id`	`Key`	-	该项的唯一标识。
`isDisabled`	`boolean`	`false`	是否禁用该项。
`defaultExpanded`	`boolean`	`false`	初始是否展开。
`isExpanded`	`boolean`	-	受控展开状态。
`onExpandedChange`	`(isExpanded: boolean) => void`	-	展开状态变化时调用的事件处理函数。
`className`	`string`	-	额外的 Tailwind CSS 类。
`children`	`ReactNode`	-	项内容。
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionItemRenderProps>`	-	使用自定义渲染函数覆盖默认 DOM 元素。

Accordion.Trigger Props

Prop	类型	默认值	描述
`className`	`string`	-	额外的 Tailwind CSS 类。
`children`	`ReactNode \| RenderFunction`	-	触发器内容或渲染函数。
`onPress`	`() => void`	-	额外的按下事件处理函数。
`isDisabled`	`boolean`	-	是否禁用触发器。
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, TriggerRenderProps>`	-	使用自定义渲染函数覆盖默认 DOM 元素。

Accordion.Panel Props

Prop	类型	默认值	描述
`className`	`string`	-	额外的 Tailwind CSS 类。
`children`	`ReactNode`	-	面板内容。
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionPanelRenderProps>`	-	使用自定义渲染函数覆盖默认 DOM 元素。

Accordion.Indicator Props

Prop	类型	默认值	描述
`className`	`string`	-	额外的 Tailwind CSS 类。
`children`	`ReactNode`	-	自定义指示图标。

Accordion.Body Props

Prop	类型	默认值	描述
`className`	`string`	-	额外的 Tailwind CSS 类。
`children`	`ReactNode`	-	正文内容。

Accordion 手风琴

引入

用法

组件结构

Surface

多项同时展开

受控

自定义指示器

禁用状态

整个手风琴禁用

单独禁用条目

FAQ 布局

常见问题

自定义样式

无分隔线

自定义渲染函数

Related Components

样式

传入 Tailwind CSS 类

自定义组件类

CSS 类

基础类

变体类

状态类

交互状态

API 参考

Accordion Props

Accordion.Item Props

Accordion.Trigger Props

Accordion.Panel Props

Accordion.Indicator Props

Accordion.Body Props

本页目录

Related Components

Accordion 手风琴

如何下单？

可以修改或取消订单吗？

支持哪些支付方式？

运费如何计算？

是否提供国际配送？

如何申请退款？

如何下单？

可以修改或取消订单吗？

支持哪些支付方式？

运费如何计算？

是否提供国际配送？

如何申请退款？

快速开始

核心概念

高级用法

最佳实践

快速开始

核心概念

高级用法

使用加号/减号图标

使用圆形箭头图标

使用双箭头图标

整个手风琴禁用

禁用项 1

禁用项 2

单独禁用条目

可用项

禁用项

另一可用项

常见问题

如何下单？

可以修改或取消订单吗？

如何购买许可证？

标准版与专业版有什么区别？

如何获取支持？

开启通知接收账户活动更新

安装浏览器扩展将浏览器连接到你的账户

铸造收藏品创建你的第一件收藏品

如何下单？

可以修改或取消订单吗？

支持哪些支付方式？

Related Components

本页目录

Related Components