SuperAPI AI 工具集

radix-ui

前端与建站

查看项目

更新于 10-15 09:45

技能介绍

Radix UI 技能为开发者提供构建可访问组件时的专家级辅助,核心围绕 Radix UI 的原语(primitives)展开。根据资料,其目标场景是使用 Radix UI 构建无障碍(accessible)组件,主要面向组件库(component-library)、无障碍实现(accessibility-implementation)和设计系统(design-system)三类流程。

主要能力包括:使用 Radix 原语;组合可访问组件;使用 CSS 或 Tailwind 进行样式定制;处理复杂交互;实现 WAI-ARIA 模式。

使用方式方面,资料给出以 Dialog 为例的代码模式:从 '@radix-ui/react-dialog' 导入全部原语,使用 Dialog.Root 作为根容器,Dialog.Trigger 通过 asChild 包裹触发元素,Dialog.Portal 承载浮层内容,其中包含 Dialog.Overlay 与 Dialog.Content。Overlay 使用 className "fixed inset-0 bg-black/50" 实现全屏遮罩,Content 使用 className "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg" 实现居中面板,并在 Content 内使用 Dialog.Title 与 Dialog.Description,最后用 Dialog.Close(同样通过 asChild)提供关闭入口。

适用场景为需要无障碍交互组件的界面开发,尤其是采用 Radix 原语加 CSS/Tailwind 样式的技术路线。

限制方面,资料未提供具体的收费方式、价格、支持平台、性能或效果保证等信息,也未提供安装命令或更多 API 说明,相关内容暂未提供。