SuperAPI AI 工具集

radix-ui

通用与其它

查看项目

更新于 10-16 00:29

技能介绍

用途:Radix UI 提供无样式、可访问的 React 组件原语,用于构建高质量设计系统,适合需要自定义外观同时保证无障碍性的界面开发。

主要能力:涵盖 Dialog、Dropdown Menu、Tooltip、Tabs、Select、Popover、Accordion、Checkbox、Switch、Slider、Alert Dialog 等组件,支持受控与非受控用法、子菜单、分组、Portal 渲染等。

使用方式:按需安装单个组件,例如 npm install @radix-ui/react-dialog、npm install @radix-ui/react-dropdown-menu、npm install @radix-ui/react-tooltip、npm install @radix-ui/react-tabs。通过组合 Root、Trigger、Portal、Content 等子组件使用,并用 className 自定义样式。

最佳实践:使用 asChild 组合自有元素;用 data 属性(如 data-[state=open])设置样式;添加 CSS 过渡动画;保留 ARIA 属性;用 Portal 保证堆叠上下文。

常见错误:缺少 Portal、移除无障碍属性、直接给子元素加样式、缺少 Tooltip.Provider、误用 onClick 而非 onSelect。

限制:资料未提供收费、价格、平台支持范围等信息,暂未提供。