120k
New

头像

PreviousNext

用于表示用户的图像元素，并提供备用显示内容。

Base UIReact AriaRadix UI
@shadcn
CN
@evilrabbit
ER
@shadcn
CN
@maxleiter
LR
@evilrabbit
ER
+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

基础

带有图像和回退内容的基础头像组件。

@shadcn
CN
import {
  Avatar,
  AvatarFallback,

徽章

使用 AvatarBadge 组件向头像添加徽章。徽章位于头像的右下角。

@shadcn
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> 中使用图标。

@pranathip
PP
import { PlusIcon } from "lucide-react"

import {

头像组

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

@shadcn
CN
@maxleiter
LR
@evilrabbit
ER
import {
  Avatar,
  AvatarFallback,

头像组数量

使用 <AvatarGroupCount> 为头像组添加数量。

@shadcn
CN
@maxleiter
LR
@evilrabbit
ER
+3
import {
  Avatar,
  AvatarFallback,

带图标的头像组

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

@shadcn
CN
@maxleiter
LR
@evilrabbit
ER
import { PlusIcon } from "lucide-react"

import {

尺寸

使用 size 属性更改头像的尺寸。

@shadcn
CN
@shadcn
CN
@shadcn
CN
import {
  Avatar,
  AvatarFallback,

下拉菜单

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

"use client"

import {

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

@shadcn
CN
@evilrabbit
ER
@shadcn
CN
@maxleiter
LR
@evilrabbit
ER
+٣
"use client"

import * as React from "react"

API 参考

Avatar

Avatar 组件是包裹头像图片和备用内容的根组件。

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

AvatarImage

AvatarImage 组件用于显示头像图片。

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

AvatarFallback

当图片加载失败时，AvatarFallback 组件用于显示备用内容。

属性类型默认值
classNamestring-

AvatarBadge

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

属性类型默认值
classNamestring-

AvatarGroup

AvatarGroup 组件用于显示一组头像，并采用重叠样式。

属性类型默认值
classNamestring-

AvatarGroupCount

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

属性类型默认值
classNamestring-