头像

一个图像元素，用于表示用户，并提供备用显示。

import React from 'react';
import * as Avatar from '@radix-ui/react-avatar';
import './styles.css';

const AvatarDemo = () => (
  <div style={{ display: 'flex', gap: 20 }}>
    <Avatar.Root className="AvatarRoot">
      <Avatar.Image
        className="AvatarImage"
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
        alt="Colm Tuite"
      />
      <Avatar.Fallback className="AvatarFallback" delayMs={600}>
        CT
      </Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root className="AvatarRoot">
      <Avatar.Image
        className="AvatarImage"
        src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
        alt="Pedro Duarte"
      />
      <Avatar.Fallback className="AvatarFallback" delayMs={600}>
        JD
      </Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root className="AvatarRoot">
      <Avatar.Fallback className="AvatarFallback">PD</Avatar.Fallback>
    </Avatar.Root>
  </div>
);

export default AvatarDemo;

特性

自动和手动控制图像何时渲染。

备用部分可以接受任何子元素。

可以选择延迟备用渲染以避免内容闪烁。

安装

从命令行安装组件。

npm install @radix-ui/react-avatar

结构

导入所有部分并将其组合在一起。

import * as Avatar from '@radix-ui/react-avatar';

export default () => (
  <Avatar.Root>
    <Avatar.Image />
    <Avatar.Fallback />
  </Avatar.Root>
);

API 参考

根

包含头像的所有部分。

属性	类型	默认值
`asChild`	`布尔值`	`false`

图像

要渲染的图像。默认情况下，它仅在加载完成后才会渲染。如果需要更多控制，可以使用 onLoadingStatusChange 处理程序。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`onLoadingStatusChange`	`函数`	无默认值

备用

图像未加载时渲染的元素。这意味着在加载过程中或出现错误时。如果在加载过程中注意到闪烁，可以提供 delayMs 属性来延迟其渲染，以便它仅对连接较慢的用户渲染。有关更多控制，请使用 onLoadingStatusChange 处理程序在 Avatar.Image 上。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`delayMs`	`数字`	无默认值

示例

可以将头像与工具提示组合以显示其他信息。

import * as Avatar from '@radix-ui/react-avatar';
import * as Tooltip from '@radix-ui/react-tooltip';

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>
      <Avatar.Root>…</Avatar.Root>
    </Tooltip.Trigger>

    <Tooltip.Content side="top">
      Tooltip content
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Root>
);

上一个纵横比

下一个复选框

在 GitHub 上编辑此页面。

概述

指南

组件

实用程序

头像

特性

安装

结构

API 参考

根

图像

备用

示例

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