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
布尔值

将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

图像 ​

要渲染的图像。 默认情况下，它只会在加载后渲染。 如果您需要更多控制，可以使用 @loadingStatusChange 处理程序。

道具默认值类型
as
'img'
AsTag | 组件

此组件应渲染为的元素或组件。 可以被 asChild 覆盖

asChild
布尔值

将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

src*
字符串
发出有效载荷
loadingStatusChange
[value: ImageLoadingStatus]

提供有关图像加载状态信息的回调。
这在您想要更精确地控制在图像加载时渲染的内容时很有用。

回退 ​

图像未加载时渲染的元素。 这意味着在加载期间，或者如果出现错误。 如果您在加载期间注意到闪烁，您可以提供一个 delayMs 道具以延迟其渲染，使其只对连接速度较慢的人渲染。 为了获得更多控制，请在 AvatarImage 上使用 @loadingStatusChange 发出。

道具默认值类型
as
'span'
AsTag | 组件

此组件应渲染为的元素或组件。 可以被 asChild 覆盖

asChild
布尔值

将默认渲染的元素更改为作为子元素传递的元素，合并其属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

delayMs
0
数字

用于延迟渲染，使其只对连接速度较慢的人出现。

示例 ​

带有工具提示的可点击头像 ​

您可以将头像与 工具提示 组合以显示更多信息。

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>