头像

¥Avatar

用于表示用户的图片元素，带有回退功能。

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;
Expand code

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

npm install @radix-ui/react-avatar

结构

¥Anatomy

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

¥Import all parts and piece them together.

import { Avatar } from "radix-ui";

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

API 参考

¥API Reference

根

¥Root

包含头像的所有部分。

¥Contains all the parts of an avatar.

图片

¥Image

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

¥The image to render. By default it will only render when it has loaded. You can use the onLoadingStatusChange handler if you need more control.

后备方案

¥Fallback

图片未加载时渲染的元素。这意味着加载过程中或发生错误时。如果你在加载过程中发现闪烁，你可以提供一个 delayMs prop 来延迟其渲染，使其仅在连接速度较慢的设备上渲染。为了获得更多控制权，请在 Avatar.Image 上使用 onLoadingStatusChange 处理程序。

¥An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections. For more control, use the onLoadingStatusChange handler on Avatar.Image.

示例

¥Examples

带工具提示的可点击头像

¥Clickable Avatar with tooltip

你可以使用 工具提示 组合头像以显示额外信息。

¥You can compose the Avatar with a Tooltip to display extra information.

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

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

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