SuperAPI AI 工具集

reka-ui

前端与建站

查看项目

更新于 10-16 02:39

技能介绍

用途:Reka UI 提供无样式、可访问的 Vue 3 组件原语(前身 Radix Vue),适合从零构建 headless 组件、需要 WAI-ARIA 合规组件、使用 Nuxt UI 或 shadcn-vue 等基于 Reka 的库,以及实现可访问的表单、对话框、菜单、浮层。当前版本 v2.10.5(2026 年 9 月)。

主要能力:组件按 Root、Trigger、Content、Portal 等部件拆分;支持 asChild 将行为与属性合并到子元素;用 v-model 实现受控状态、用 default* 属性实现非受控状态;forceMount 可让元素保留在 DOM 以配合动画库;Combobox、Listbox、Tree 支持虚拟滚动;支持上下文注入。近期新增 Drawer(滑动手势)、Autocomplete、TimeRangeField、颜色组件、MonthPicker/YearPicker、Rating 等,并在 DropdownMenu 过滤、Checkbox/Switch 自定义取值、Splitter 像素尺寸、Tooltip 全局内容配置、ConfigProvider 全局 teleport 目标、Select nullableValue、Popper 方向等加入能力。

使用方式:在 nuxt.config.ts 中配置 modules: ['reka-ui/nuxt'] 可自动导入全部组件;也可用 RekaResolver 配合 unplugin-vue-components 的 Components({ resolvers: [RekaResolver()] }) 实现按需自动导入。参考文件包括 references/components.md(按分类的组件索引)与 components/*.md(单组件细节),按需加载,不要一次加载全部。

限制:库本身无样式,需自行编写 CSS;日期组件的 weekStartsOn 自 v2.8.0 起与 locale 无关(破坏性变更);需配合 Vue 使用,若使用带样式的 Nuxt 组件请参考 nuxt-ui 技能,Vue 通用模式请参考 vue 技能。更多指南见官方文档与 GitHub。