命名空间组件
Radix Vue 的设计模式是为每个组件创建基本元素,并允许用户根据自己的需要构建或 组合 组件。
但是,逐个导入所有必要的组件可能需要相当大的工作量,用户有时可能会不小心遗漏重要的组件。
为了解决这一痛点,我们从 v.1.2.0 开始引入了 命名空间组件。
如何使用?
首先,您需要通过在 Vue 组件中使用 radix-vue/namespaced
导入命名空间组件。
vue
<script setup lang="ts">
import { Dialog, DropdownMenu } from 'radix-vue/namespaced'
</script>
然后,您可以在命名空间内使用所有相关的组件。
vue
<script setup lang="ts">
import { Dialog } from 'radix-vue/namespaced'
</script>
<template>
<Dialog.Root>
<Dialog.Trigger>
Trigger
</Dialog.Trigger>
</Dialog.Root>
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
…
</Dialog.Content>
</Dialog.Portal>
</template>