React 组件

UGCollapsible 折叠面板

单块补充内容使用原生 details/summary 语义;多项内容组请改用 Accordion。

导入方式

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

tsx
import { UGCollapsible, UGCollapsibleTrigger, UGCollapsibleContent } from '@ug666/ui-react'

受控折叠

查看构建说明
生产构建会同时生成组件样式、类型声明和文档站机器可读资料。

柔和与禁用

为什么保留原生语义?
浏览器、键盘和辅助技术可以直接理解折叠关系。
当前不可查看
禁用内容

属性

属性类型默认值说明
openboolean-受控展开状态。
defaultOpenbooleanfalse非受控初始状态。
onOpenChange(open: boolean) => void-展开状态变化回调。
variantdefault | subtledefault边框或柔和背景。