Radix Vue

外観

コンポジション ​

`asChild` プロパティを使用して、Radix の機能を代替の要素タイプや独自の Vue コンポーネントに構成します。

DOM 要素をレンダリングするすべての Radix プリミティブ部分は、asChild プロパティを受け入れます。asChild が true に設定されている場合、Radix Vue はデフォルトの DOM 要素をレンダリングせず、代わりに、機能を有効にするために必要なプロパティと動作をスロットの最初の子に渡します。

要素タイプの変更 ​

Radix は最も適切なデフォルトを提供するように設計されているため、ほとんどの場合、要素タイプを変更する必要はありません。ただし、変更すると便利な場合もあります。

良い例は TooltipTrigger です。デフォルトでは、この部分は button としてレンダリングされますが、リンク（a タグ）にもツールチップを追加したい場合があります。asChild を使用してこれを実現する方法を見てみましょう。

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

<template>
  <TooltipRoot>
    <TooltipTrigger asChild>
      <a href="https://radix-vue.dokyumento.jp/">Radix Vue</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 "radix-vue";
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>