SuperAPI AI 工具集

radix-ui

前端与建站

查看项目

更新于 10-16 05:06

技能介绍

用途:Radix UI 提供无样式、可访问的 React UI 原语,用于构建对话框、下拉菜单、选择器、提示框、标签页等交互组件,内置键盘导航、焦点管理与 ARIA 属性,设计上可与 Tailwind CSS 和 Framer Motion 组合。仅支持 Web,移动端模态与底部面板建议参考 expo-sdk、react-native-patterns。

主要能力:以组合式组件为主,如 Dialog 由 Root、Trigger、Portal、Overlay、Content 等部分组成;Select 提供 Trigger、Value、Icon、Portal、Content、Item、Viewport、Group、Label、Separator;Tooltip 通过根部 TooltipProvider 统一管理。支持受控与非受控两种状态模式。自动提供 ARIA 角色与键盘行为:Dialog 支持 Esc 关闭与 Tab 焦点陷阱,Select 支持方向键、回车与输入跳转,Tabs 支持方向键与 Home/End,Tooltip 聚焦触发即显示。

使用方式:可按需安装单个包,如 pnpm add @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-select @radix-ui/react-tooltip @radix-ui/react-tabs;也可安装统一包 pnpm add radix-ui。样式通过 Tailwind 的 data-[state=open]、data-[disabled]、data-[state=checked]、data-[side=top] 等选择器控制开合、禁用、选中与方位状态。弹层与下拉应放入 Portal 以避免 z-index、overflow 裁剪与 transform 冲突。Framer Motion 动画需配合 forceMount 与 AnimatePresence,并确认焦点管理仍正常。

适用场景:需要自定义视觉风格又要求可访问性的 React Web 项目,如设计系统、组件库、复杂表单与菜单交互。

限制:Dialog 必须提供 Title 与 Description 以满足无障碍要求;自定义触发元素应使用 asChild 避免多余包裹层;TooltipProvider 只应在应用根部放置一次;受控模式需提供 onOpenChange/onValueChange;需关注 focus:ring 样式与键盘测试。完整 API、全部属性与更多示例需通过 Context7 MCP 解析后查询官方文档,资料未提供价格与收费信息。