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 > )
若要自定义 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 方法论，确保组件变体与状态可复用且易于自定义。
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"]
Prop 类型 默认值 描述 allowsMultipleExpandedbooleanfalse是否允许多项同时展开 defaultExpandedKeysIterable<Key>- 初始展开的 key expandedKeysIterable<Key>- 受控的展开 key onExpandedChange(keys: Set<Key>) => void- 展开 key 变化时调用的事件处理函数 isDisabledbooleanfalse是否禁用整个 Accordion variant"default" | "surface""default"Accordion 的视觉变体 hideSeparatorbooleanfalse是否隐藏 Accordion 项之间的分隔线 classNamestring- 额外的 CSS 类 childrenReactNode- Accordion 项 renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionRenderProps>- 使用自定义渲染函数覆盖默认 DOM 元素。
Prop 类型 默认值 描述 idKey- 该项的唯一标识 isDisabledbooleanfalse是否禁用该项 defaultExpandedbooleanfalse初始是否展开 isExpandedboolean- 受控展开状态 onExpandedChange(isExpanded: boolean) => void- 展开状态变化时调用的事件处理函数 classNamestring- 额外的 CSS 类 childrenReactNode- 项内容 renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionItemRenderProps>- 使用自定义渲染函数覆盖默认 DOM 元素。
Prop 类型 默认值 描述 classNamestring- 额外的 CSS 类 childrenReactNode | RenderFunction- 触发器内容或渲染函数 onPress() => void- 额外的按下事件处理函数 isDisabledboolean- 是否禁用触发器 renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, TriggerRenderProps>- 使用自定义渲染函数覆盖默认 DOM 元素。
Prop 类型 默认值 描述 classNamestring- 额外的 CSS 类 childrenReactNode- 面板内容 renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, AccordionPanelRenderProps>- 使用自定义渲染函数覆盖默认 DOM 元素。
Prop 类型 默认值 描述 classNamestring- 额外的 CSS 类 childrenReactNode- 自定义指示图标
Prop 类型 默认值 描述 classNamestring- 额外的 CSS 类 childrenReactNode- 正文内容
