Reka UI 标志Reka
backdrop
指南

命名空间组件

Reka UI 的设计模式是为每个组件创建基本元素,并允许用户随意构建或组合组件。

然而,逐一导入所有必要的组件可能会非常耗时,并且用户有时可能会不小心遗漏重要的组件。

如何使用?

首先,你需要在 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>
      Trigger
    </Dialog.Trigger>
  </Dialog.Root>

  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>

    </Dialog.Content>
  </Dialog.Portal>
</template>