头像

一个带有后备方案的图像元素，用于表示用户。

import * as React from "react";
import { Avatar } from "radix-ui";
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;

Features

对图像渲染时机的自动和手动控制。

后备部分接受任何子元素。

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

安装

从命令行安装组件。

npm install @radix-ui/react-avatar

解剖结构

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

import { Avatar } from "radix-ui";

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

API 参考

根元素

包含头像的所有部分。

Prop	Type	Default
`asChild`	`boolean`	`false`

图像

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`onLoadingStatusChange`	`function`	No default value

后备

在图像未加载时渲染的元素。这意味着在加载时或如果出现错误。如果您在加载期间注意到闪烁，可以提供 delayMs 属性来延迟其渲染，以便仅在连接较慢的情况下渲染。要获得更多控制，请在 Avatar.Image 上使用 onLoadingStatusChange 处理程序。

Prop	Type	Default
`asChild`	`boolean`	`false`
`delayMs`	`number`	No default value

示例

可点击的头像与工具提示

您可以将头像与工具提示组合，以显示额外的信息。

import { Avatar, Tooltip } from "radix-ui";

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

		<Tooltip.Content side="top">
			工具提示内容
			<Tooltip.Arrow />
		</Tooltip.Content>
	</Tooltip.Root>
);

上一篇长宽比 Aspect Ratio

下一篇复选框 Checkbox

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

头像

Features