React 组件

UGAccordion 手风琴

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGAccordion, UGAccordionItem, UGAccordionTrigger, UGAccordionContent } from '@ug666/ui-react'

单选模式

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

ug-ui 是一个面向 React 和 Vue 3 的通用组件库，提供一致的组件样式与交互体验。

多选模式

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

组件支持亮色与深色外观，适合在不同后台页面中保持一致体验。

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

默认展开

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

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

代码示例

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

tsx

import { UGAccordion, UGAccordionItem, UGAccordionTrigger, UGAccordionContent } from '@ug666/ui-react'

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

Props

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