React 组件
UGCollapsible 折叠面板
单块补充内容使用原生 details/summary 语义;多项内容组请改用 Accordion。
导入方式
按需从包入口导入组件,并在应用入口引入一次样式文件。
tsx
import { UGCollapsible, UGCollapsibleTrigger, UGCollapsibleContent } from '@ug666/ui-react'受控折叠
查看构建说明
生产构建会同时生成组件样式、类型声明和文档站机器可读资料。
柔和与禁用
为什么保留原生语义?
浏览器、键盘和辅助技术可以直接理解折叠关系。
当前不可查看
禁用内容
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| open | boolean | - | 受控展开状态。 |
| defaultOpen | boolean | false | 非受控初始状态。 |
| onOpenChange | (open: boolean) => void | - | 展开状态变化回调。 |
| variant | default | subtle | default | 边框或柔和背景。 |