124k
New

头像

PreviousNext

一个带有回退的图像元素，用于表示用户。

Base UIReact AriaRadix UI
Radix UI
CNER
CNLRER
+3
import {
  Avatar,
  AvatarBadge,

安装

pnpm dlx shadcn@latest add avatar

用法

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

组合

使用以下组合来构建 Avatar：

Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

使用以下组合来构建 AvatarGroup：

AvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

基础

一个带有图片和回退的基础头像组件。

CN
import {
  Avatar,
  AvatarFallback,

徽章

使用 AvatarBadge 组件为头像添加徽章。徽章通常定位在头像的右下角。

CN
import {
  Avatar,
  AvatarBadge,

使用 className 属性为徽章添加自定义样式，如自定义颜色、尺寸等。

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

带图标的徽章

你也可以在 <AvatarBadge> 中使用图标。

PP
import { PlusIcon } from "lucide-react"

import {

头像组

使用 AvatarGroup 组件添加一组头像。

CNLRER
import {
  Avatar,
  AvatarFallback,

头像组计数

使用 <AvatarGroupCount> 在头像组中添加计数。

CNLRER
+3
import {
  Avatar,
  AvatarFallback,

带图标的头像组

你也可以在 <AvatarGroupCount> 中使用图标。

CNLRER
import { PlusIcon } from "lucide-react"

import {

尺寸

使用 size 属性更改头像的大小。

CNCNCN
import {
  Avatar,
  AvatarFallback,

下拉菜单

你可以将 Avatar 组件用作下拉菜单的触发器。

import {
  Avatar,
  AvatarFallback,

RTL 支持

要在 shadcn/ui 中启用 RTL（从右到左）支持，请参阅 RTL 配置指南。

CNER
CNLRER
+٣
"use client"

import * as React from "react"

API 参考

Avatar

Avatar 组件是根组件，用于包裹头像图片和回退内容。

属性类型默认值
size"default" | "sm" | "lg""default"
classNamestring-

AvatarImage

AvatarImage 组件展示头像图片。它接受所有 Radix UI Avatar Image 属性。

属性类型默认值
srcstring-
altstring-
classNamestring-

AvatarFallback

AvatarFallback 组件在图片加载失败时展示回退内容。它接受所有 Radix UI Avatar Fallback 属性。

属性类型默认值
classNamestring-

AvatarBadge

AvatarBadge 组件在头像上显示徽章指示器，通常位于右下角。

属性类型默认值
classNamestring-

AvatarGroup

AvatarGroup 组件展示一组头像，带有重叠样式。

属性类型默认值
classNamestring-

AvatarGroupCount

AvatarGroupCount 组件在头像组中显示数量指示器，通常表示额外头像的数量。

属性类型默认值
classNamestring-

更多关于 Radix UI Avatar 属性的信息，请参阅 Radix UI 文档。