Radix Vue

外観

アバター ​

ユーザーを表すためのフォールバックを備えた画像要素。
PD
vue
<script setup lang="ts">
import { AvatarFallback, AvatarImage, AvatarRoot } from 'radix-vue'
</script>

<template>
  <div class="flex gap-5">
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarImage
        class="h-full w-full rounded-[inherit] object-cover"
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
        alt="Colm Tuite"
      />
      <AvatarFallback
        class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
        :delay-ms="600"
      >
        CT
      </AvatarFallback>
    </AvatarRoot>
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarImage
        class="h-full w-full rounded-[inherit] object-cover"
        src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
        alt="Pedro Duarte"
      />
      <AvatarFallback
        class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
        :delay-ms="600"
      >
        JD
      </AvatarFallback>
    </AvatarRoot>
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarFallback class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
        PD
      </AvatarFallback>
    </AvatarRoot>
  </div>
</template>

特徴 ​

  • 画像がいつレンダリングされるかの自動および手動制御。
  • フォールバック部分には任意の要素を含めることができます。
  • コンテンツのちらつきを避けるために、フォールバックのレンダリングを遅延させるオプション。

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構造 ​

すべてのパーツをインポートして組み合わせます。

vue
<script setup>
import { AvatarImage, AvatarRoot } from 'radix-vue'
</script>

<template>
  <AvatarRoot>
    <AvatarImage />
    <AvatarFallback />
  </AvatarRoot>
</template>

APIリファレンス ​

ルート ​

アバターのすべての部分を含みます

プロパティデフォルト型
as
'span'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、プロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

画像 ​

レンダリングする画像。デフォルトでは、読み込みが完了したときにのみレンダリングされます。さらに詳細な制御が必要な場合は、@loadingStatusChangeハンドラーを使用できます。

プロパティデフォルト型
as
'img'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、プロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

src*
string
Emitペイロード
loadingStatusChange
[value: ImageLoadingStatus]

画像の読み込み状況に関する情報を提供するコールバック。
これは、画像の読み込み中に何をレンダリングするかをより正確に制御したい場合に役立ちます。

フォールバック ​

画像が読み込まれていない場合にレンダリングされる要素。これは、読み込み中、またはエラーが発生した場合を意味します。読み込み中にちらつきが発生する場合は、delayMsプロパティを指定して、レンダリングを遅延させ、接続速度の遅いユーザーに対してのみレンダリングされるようにすることができます。より詳細な制御を行うには、AvatarImageの@loadingStatusChange emitを使用します。

プロパティデフォルト型
as
'span'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、プロパティと動作をマージします。

詳細については、コンポジションガイドをお読みください。

delayMs
0
number

接続速度の遅いユーザーに対してのみ表示されるように、レンダリングを遅延させるのに便利です。

例 ​

ツールチップ付きのクリック可能なアバター ​

追加情報を表示するために、アバターをツールチップと組み合わせることができます。

vue
<script setup>
import { AvatarImage, AvatarRoot, TooltipArrow, TooltipRoot, TooltipTrigger } from 'radix-vue'
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger>
      <AvatarRoot>…</AvatarRoot>
    </TooltipTrigger>

    <TooltipContent side="top">
      Tooltip content
      <TooltipArrow />
    </TooltipContent>
  </TooltipRoot>
</template>