命名空间组件
Reka UI 的设计模式是为每个组件创建基础元素(primitives),并允许用户按需构建或组合组件。
然而,逐个导入所有必要组件可能相当繁琐,用户有时可能会意外遗漏重要组件。
如何使用?
首先,您需要在 Vue 组件中通过 reka-ui/namespaced 导入命名空间组件。
vue
<script setup lang="ts">
import { Dialog, DropdownMenu } from 'reka-ui/namespaced'
</script>随后,您即可在命名空间内使用所有相关组件。
vue
<script setup lang="ts">
import { Dialog } from 'reka-ui/namespaced'
</script>
<template>
<Dialog.Root>
<Dialog.Trigger>
触发器
</Dialog.Trigger>
</Dialog.Root>
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
…
</Dialog.Content>
</Dialog.Portal>
</template>