Reka UI logoReka
backdrop
示例
指南

组合

使用 asChild 属性将 Reka 的功能组合到其他元素类型或您自己的 Vue 组件上。

所有渲染 DOM 元素的 Reka UI 部件都接受 asChild 属性。当 asChild 设置为 true 时，Reka UI 将不会渲染默认的 DOM 元素，而是将使其功能所需的属性和行为传递给插槽的第一个子元素。

更改元素类型

在大多数情况下，您不需要修改元素类型，因为 Reka 旨在提供最合适的默认值。但是，在某些情况下这样做会有所帮助。

一个很好的例子是 TooltipTrigger。默认情况下，此部件呈现为 button，但您可能还希望将工具提示添加到链接（a 标签）。让我们看看如何使用 asChild 实现此目的。

vue
<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipPortal } from "reka-ui";
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger asChild>
      <a href="https://reka-ui.cn/">Reka UI</a>
    </TooltipTrigger>
    <TooltipPortal>…</TooltipPortal>
  </TooltipRoot>
</template>
警告

如果您决定更改底层元素类型，您有责任确保其保持可访问性和功能性。例如，对于 TooltipTrigger，它必须是一个可聚焦的元素，能够响应指针和键盘事件。如果您将其切换为 div，它将不再可访问。

实际上，您很少会像上面那样修改底层 DOM 元素。相反，更常见的是使用您自己的 Vue 组件。对于大多数 Trigger 部件尤其如此，因为您通常希望将功能与设计系统中的自定义按钮和链接组合起来。

与您自己的 Vue 组件组合

这与上面完全相同，您将 asChild 传递给该部件，然后用它包装您自己的组件。但是，有几点需要注意。

组合多个原语

asChild 可以根据您的需要深入使用。这意味着它是将多个原语行为组合在一起的好方法。以下是如何将 TooltipTrigger 和 DialogTrigger 与您自己的按钮组合在一起的示例

vue
<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipPortal, DialogRoot, DialogTrigger, DialogPortal } from "reka-ui";
import MyButton from from "@/components/MyButton.vue"
</script>

<template>
  <DialogRoot>
    <TooltipRoot>
      <TooltipTrigger asChild>
        <DialogTrigger asChild>
          <MyButton>Open dialog</MyButton>
        </DialogTrigger>
      </TooltipTrigger>
      <TooltipPortal>…</TooltipPortal>
    </TooltipRoot>

    <DialogPortal>...</DialogPortal>
  </DialogRoot>
</template>