Back to Details

reka-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Reka UI

Reka UI

Unstyled, accessibility-first Vue.js component library. Zero styles, WAI-ARIA compliant, keyboard navigation, and focus management built in.
bash
npm install reka-ui
无样式、优先考虑可访问性的Vue.js组件库。内置零样式、WAI-ARIA合规性、键盘导航和焦点管理功能。
bash
npm install reka-ui

Core Patterns

核心模式

Anatomy: Root → Trigger → Portal → Content. Import named parts from 
reka-ui
. Namespaced: 
import { Dialog } from 'reka-ui/namespaced'
→ 
<Dialog.Root>
, 
<Dialog.Trigger>
, etc.
Styling: Target 
data-state
, 
data-side
, 
data-align
, 
data-disabled
, 
data-highlighted
. CSS: 
.Item[data-state="open"] {}
. Tailwind: 
data-[state=open]:border-b-2
. Teleported elements (portals) need 
:deep()
in scoped styles.
asChild: Merges behavior onto the child element instead of rendering the default element. Use to render a custom element or compose multiple primitives.
State: Uncontrolled = 
default-value
prop. Controlled = 
v-model
(or 
:model-value
+ 
@update:model-value
).
Animation: CSS keyframes on 
data-state
(Reka suspends unmount during exit), Vue 
<Transition>
, or Motion Vue (
motion-v
) with 
AnimatePresence
.
Nuxt: 
modules: ['reka-ui/nuxt']
— auto-imports all components.
RTL: 
<ConfigProvider dir="rtl">
wraps the app.
Dates: Install 
@internationalized/date
. 
v-model
on calendar/date components accepts 
DateValue
objects.
Virtualization: 
*Virtualizer
components for large lists. Requires fixed-height parent, 
estimateSize
, 
textContent
props. Filter items manually before passing.
结构: 根节点 → 触发器 → 传送门 → 内容。从
reka-ui
导入命名部件。命名空间用法：
import { Dialog } from 'reka-ui/namespaced'
→ 
<Dialog.Root>
, 
<Dialog.Trigger>
等。
样式: 针对
data-state
、
data-side
、
data-align
、
data-disabled
、
data-highlighted
属性进行样式设置。CSS示例：
.Item[data-state="open"] {}
。Tailwind示例：
data-[state=open]:border-b-2
。传送元素（portals）在作用域样式中需要使用
:deep()
。
asChild: 将行为合并到子元素上，而非渲染默认元素。用于渲染自定义元素或组合多个基础组件。
状态: 非受控状态 = 使用
default-value
属性。受控状态 = 使用
v-model
（或
:model-value
+ 
@update:model-value
）。
动画: 基于
data-state
的CSS关键帧（Reka在退出期间会暂停卸载）、Vue 
<Transition>
或搭配
AnimatePresence
的Motion Vue（
motion-v
）。
Nuxt: 在
modules: ['reka-ui/nuxt']
中配置——自动导入所有组件。
RTL: 使用
<ConfigProvider dir="rtl">
包裹应用。
日期: 安装
@internationalized/date
。日历/日期组件上的
v-model
接受
DateValue
对象。
虚拟化: 使用
*Virtualizer
组件处理大型列表。需要固定高度的父元素、
estimateSize
和
textContent
属性。传递前需手动过滤项目。

References

参考资料

Read only the file relevant to the current task.
  • references/components-a-l.md — Anatomy, data attributes, CSS variables, and key notes for components Accordion through Listbox.
  • references/components-m-z.md — Anatomy, data attributes, CSS variables, and key notes for components Menubar through Tree.
  • references/guides.md — Styling, composition (asChild), animation, controlled state, dates, i18n/RTL, SSR, virtualization, namespaced imports, inject context, migration guide.
  • references/utilities.md — Primitive, Slot, ConfigProvider, VisuallyHidden, Presence, FocusScope, and composables (useForwardPropsEmits, useFilter, useDateFormatter, etc.).
仅阅读与当前任务相关的文件。
  • references/components-a-l.md — 从Accordion到Listbox组件的结构、数据属性、CSS变量和关键说明。
  • references/components-m-z.md — 从Menubar到Tree组件的结构、数据属性、CSS变量和关键说明。
  • references/guides.md — 样式设计、组合（asChild）、动画、受控状态、日期、国际化/RTL、SSR、虚拟化、命名空间导入、注入上下文、迁移指南。
  • references/utilities.md — 基础组件、插槽、ConfigProvider、VisuallyHidden、Presence、FocusScope以及组合式函数（useForwardPropsEmits、useFilter、useDateFormatter等）。