SuperAPI AI 工具集

headless-component

前端与建站

查看项目

更新于 10-16 00:31

技能介绍

用途:在 Fluent UI v9 的 react-headless-components-preview 包中编写或扩展无样式(headless)组件。这类组件只提供 Fluent 行为、无障碍语义、语义插槽和稳定状态选择器,不带 Fluent 样式,需能与纯 CSS、CSS Modules、Tailwind 等样式系统配合使用。

主要能力:定义稳定的无后缀公共 API(Component、useComponent、renderComponent、ComponentProps、ComponentSlots、ComponentState);复合组件额外暴露子组件、上下文类型与上下文钩子;通过 data-* 属性提供受支持的 CSS 选择契约,仅描述行为状态(如 data-disabled、data-open、data-expanded、data-checked、data-selected、data-orientation、data-icon-only),不暴露外观类属性。

使用方式:先检查对应 styled v9 包与最接近的 headless 实现,确认上游是否已导出 use<Name>Base_unstable、render<Name>_unstable、上下文钩子等,优先复用而非重写。按简单、复合、组合三类规划改动,并以三个堆叠 PR 推进:底层回归测试、中间组件包(基础钩子/类型/渲染器/上下文导出及测试、API 文档、包体积覆盖、清单更新、变更文件)、顶层 headless 包(稳定原语、data-* 契约、测试、故事、公共子路径、包体积覆盖、API 文档、清单更新)。组件包 PR 始终位于 headless PR 之下,不混在同一 PR。

限制:headless 层不得添加样式、设计属性、动效、默认图标或新交互行为;不得用 appearance、size、shape 等仅样式属性扩展 API;基础钩子不得引入 Tabster 等被禁的焦点/键盘运行时;使用 useFluent_unstable() 获取 targetDocument,禁止直接访问 window、document、navigator;保留属性在基础钩子解析消费者根属性后应用,headless 状态优先;属性删除或重命名属破坏性变更,新增需测试与文档。包体积覆盖在两层 PR 均必需,组件级 fixture 只针对公开组件,不为基础钩子、渲染器、上下文助手或纯类型导出单独建 fixture。

适用场景:为 Fluent UI v9 贡献或扩展无样式组件、需要自带样式系统复用 Fluent 行为与无障碍能力的组件开发。

资料未提供具体安装命令、收费信息或平台限制。