Accordion 手风琴

数据展示

可折叠/展开的内容面板,垂直堆叠,每次可展开一个或多个。

何时使用

折叠面板展示大量可分组内容,按需展开查看。

代码示例

基础用法

tsx

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"

export function Basic() {
return (
  <Accordion type="single">
    <AccordionItem value="item-1">
      <AccordionTrigger>Section 1</AccordionTrigger>
      <AccordionContent>Content 1</AccordionContent>
    </AccordionItem>
  </Accordion>
)
}

API / Props

Accordion

Prop	Type	Default	说明
`className`	`string`	—	自定义样式类名
...rest	`React.HTMLAttributes`	—	透传原生 DOM 属性

注意事项

复合组件: 包含 3 个子组件(AccordionItem, AccordionTrigger, AccordionContent),使用组合模式按需导入。
Base UI: 基于 @base-ui/react 无头(headless)原语构建,无障碍(a11y)开箱即用。

📘 完整交互式示例与控件属性请查看 Storybook 文档。