SuperAPI AI 工具集

radix-ui

前端与建站

查看项目

更新于 10-16 01:27

技能介绍

用途:Radix UI Primitives 提供底层、无样式的 React 组件,用于构建设计系统与自定义 UI。组件内置可访问性、键盘导航与焦点管理。

主要能力:提供 30 多个常见 UI 模式的原始组件,如 Dialog、Dropdown Menu、Accordion、Tooltip、Select、Popover 等,均遵循 WAI-ARIA 设计模式。支持 asChild 组合方式,将原语与你已有组件(如设计系统的 Button)组合,也可在同一元素上叠加多个原语(如 Tooltip + Dialog)。可基于 data-state、data-side、data-highlighted 等数据属性做样式与动画,支持受控组件处理异步操作(如提交表单时 loading)。

使用方式:按需从 @radix-ui/react-* 导入,例如 import * as Dialog from "@radix-ui/react-dialog",图标可用 @radix-ui/react-icons。以 Dialog.Root、Dialog.Trigger、Dialog.Portal、Dialog.Overlay、Dialog.Content、Dialog.Title、Dialog.Description、Dialog.Close 等结构拼装;Popup 类组件通过 sideOffset、collisionPadding 控制定位,Tooltip.Provider 可设置 delayDuration。需要交互状态时用 open / onOpenChange 受控。

适用场景:构建自定义设计系统、无样式组件库、需要无障碍支持的弹窗、菜单、提示、选择器等交互组件。

限制:资料未提供安装命令、具体版本、收费或授权信息、浏览器兼容范围及性能指标。未提供的内容暂未提供,请以官方文档为准。