SuperAPI AI 工具集

reka-ui-skilld

通用与其它

查看项目

更新于 10-15 23:57

技能介绍

用途:Reka UI(reka-ui@2.10.5)是 Radix UI Primitives 的 Vue 3 移植,提供无样式、可访问的组件原语,要求 vue >= 3.4.0。文档见 https://reka-ui.com。

主要能力:覆盖入口点、组件部件与工具;支持 asChild 组合、prop 转发、上下文注入与受控状态;通过 data-state、--reka- CSS 变量和 <Transition> force-mount 实现样式与动画;集成 namespaced 入口、Nuxt 模块、组件解析器、@internationalized/date 日期与虚拟化。

版本要点:2.10.0 新增 Drawer 原语(滑动关闭、吸附点、嵌套)、ConfigProvider teleportTo、DialogRoot unmountOnHide、SelectRoot nullableValue、HoverCardRoot enableTouch、DateFieldRoot stepSnapping、TreeItem disabled、TabsIndicator CSS 变量;2.9.0 新增 Autocomplete、Color 原语、TimeRangeField、Month/Year 选择器、Checkbox/Switch 自定义布尔值、DropdownMenuFilter、Splitter 像素尺寸、TooltipProvider 全局配置。

用法:pnpm add reka-ui(或 npm/yarn/bun)。从 reka-ui 按需导入以利 tree-shaking,或从 reka-ui/namespaced 导入分组部件。用 useForwardPropsEmits 构建包装组件,用 ConfigProvider 设置 dir、locale、scrollBody、teleportTo,用 useForwardExpose 处理多根组件模板引用。日期组件接收 @internationalized/date 的 DateValue/TimeValue 对象,不接受原始字符串。

限制与注意:每个部件须置于其 Root 下,多数组件需 *Content 位于 *Portal 或 Teleport 内;Presence forceMount 会无视打开状态渲染内容,需自行控制可见性;隐藏表单字段使用部件的 name 与 value,SelectRoot 另支持 nullableValue;reka-ui/internal 导出的菜单内部实现不稳定,可能不遵循 semver;radix-vue 已更名 reka-ui,CSS 变量用 --reka- 前缀、data 属性用 data-reka-,Combobox、Checkbox、PaginationRoot 等存在破坏性变更,迁移见官方指南。