Radix 首页
由 WorkOS 制作
Radix 首页
由 WorkOS 制作
主题主题原始组件原始组件图标图标颜色颜色
文档案例研究博客
组件

头像

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

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;

特性

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

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

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

安装

从命令行安装组件。

npm install @radix-ui/react-avatar

解剖结构

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

import { Avatar } from "radix-ui";



export default () => (

	<Avatar.Root>

		<Avatar.Image />

		<Avatar.Fallback />

	</Avatar.Root>

);

API 参考

根

包含头像的所有部分。

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

图像

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

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

后备

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

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

示例

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

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

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>

);
上一个纵横比
下一个复选框
在 GitHub 上编辑此页。