@ug666/react 文档演示

Accordion 手风琴

Accordion 用于折叠展示内容，支持单选与多选模式，默认自带 ChevronDown 旋转动画。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@ug666/react'

单选模式

type='single' 时同时只能展开一个子项，collapsible 允许折叠当前项。

ug-ui 是一个面向 React 和 Vue 3 的通用组件库，基于 Tailwind CSS v4 和设计 Token 构建，提供一致的 UI 体验。

多选模式

type='multiple' 时可以同时展开多个子项。

所有颜色、间距、圆角均基于 CSS 变量 Token，支持主题切换与深色模式。

全量 TypeScript 编写，禁止 any，提供完整类型推断和 IDE 代码补全。

默认展开

通过 defaultValue 设置默认展开项，适合 FAQ 等场景。

完全开源免费，欢迎贡献代码和反馈问题。

代码示例

推荐将 Accordion 配合 FAQ 列表或配置项展示使用。

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@ug666/react'

export function FAQ() {
  return (
    <Accordion type="single" collapsible defaultValue="q1">
      <AccordionItem value="q1">
        <AccordionTrigger>如何安装组件库？</AccordionTrigger>
        <AccordionContent>
          运行 <code>bun add @ug666/react</code> 即可安装，无需额外配置。
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="q2">
        <AccordionTrigger>是否支持按需导入？</AccordionTrigger>
        <AccordionContent>
          支持，所有组件均为独立导出，Tree-shaking 友好。
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Props 说明

属性	类型	默认值	说明
type	'single' \| 'multiple'	'single'	展开模式：单选或多选。
collapsible	boolean	false	single 模式下是否允许折叠当前展开项。
defaultValue	string \| string[]	—	非受控默认展开项（single 为 string，multiple 为 string[]）。
value	string \| string[]	—	受控当前展开项。
onValueChange	(value: string \| string[]) => void	—	展开状态变更回调。
AccordionItem.value	string	—	子项唯一标识（必填）。