SuperAPI AI 工具集

compound-components

通用与其它

查看项目

更新于 10-15 21:36

技能介绍

用途:按复合组件模式构建可访问、可组合的组件,将行为与样式分离,适用于从零搭建组件库,或实现 Select、Dialog、Tabs、Accordion、Menu、Dropdown 等复杂交互组件。

主要能力:以 Root 提供上下文(状态、refs、生成 ID),子组件(Trigger、Content、Item、Portal、Overlay、Title、Description、Close 等)读取上下文;为子组件添加 ARIA 角色与 data-state 属性;实现键盘导航(方向键、Enter/Space、Escape、Tab)、焦点管理(初始焦点、模态焦点陷阱、焦点恢复);支持受控与非受控状态;通过 data 属性、CSS 变量和 asChild 模式定制样式与渲染元素。

使用方式:按清单构建——定义组件部件与职责,创建带上下文提供者的 Root,实现带 ARIA 角色和 data-state 的子组件,添加键盘导航与焦点管理,最后用纯键盘和屏幕阅读器测试。资料给出 React 版 Select 与 Dialog 的完整实现示例,以及 Tabs、Accordion、Dropdown Menu 的复合结构示例。

适用场景:组件库开发、需要灵活渲染结构的交互组件、行为与样式分离的组件、含复杂状态(开/关、选中、聚焦)的组件。

限制:资料未提供安装命令、依赖版本、框架适配范围、浏览器兼容性、性能数据或收费信息;示例以 React 为主,其他框架的用法暂未提供。