Avatar

带备用内容的图像元素，用于表示用户。

View code

特性

自动或手动控制图像渲染时机。
备用部件可接受任意子元素。
可选延迟备用内容渲染以避免内容闪烁。

安装

通过命令行安装该组件。

$ npm add reka-ui

结构

导入所有部件并组合使用。

vue

<script setup>
import { AvatarImage, AvatarRoot } from 'reka-ui'
</script>

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

API 参考

Root

包含头像的所有组成部分

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Image

要渲染的图像。默认仅在加载完成后显示。若需要更多控制，可使用 @loadingStatusChange 事件处理器。

Prop	Default	Type
`as`	`'img'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`crossOrigin`		`'' \| 'anonymous' \| 'use-credentials'`
`referrerPolicy`		`'' \| 'no-referrer' \| 'no-referrer-when-downgrade' \| 'origin' \| 'origin-when-cross-origin' \| 'same-origin' \| 'strict-origin' \| 'strict-origin-when-cross-origin' \| 'unsafe-url'`
`src*`		`string`

Emit	Payload
`loadingStatusChange`	`[value: ImageLoadingStatus]` A callback providing information about the loading status of the image. This is useful in case you want to control more precisely what to render as the image is loading.

Fallback

当图像未加载时渲染的备用元素（加载过程中或出现错误时）。若发现加载过程中出现闪烁，可通过 delayMs 属性延迟其渲染，仅针对网络较慢的用户显示。需要更精细控制时，请使用 AvatarImage 的 @loadingStatusChange 事件。

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`delayMs`		`number` Useful for delaying rendering so it only appears for those with slower connections.

示例

带提示框的可点击头像

可结合 Tooltip 组件使用，以展示额外信息。

vue

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

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

    <TooltipContent side="top">
      提示框内容
      <TooltipArrow />
    </TooltipContent>
  </TooltipRoot>
</template>

Avatar ​

特性 ​

安装 ​

结构 ​

API 参考 ​

Root ​

Image ​

Fallback ​

示例 ​

带提示框的可点击头像 ​