头像

import {
  Avatar,
  AvatarBadge,

安装

pnpmnpmyarnbun
pnpm dlx shadcn@latest add avatar
Copy

用法

Copyimport { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

Copy<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

示例

基础

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

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export function AvatarDemo() {

徽章

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

import {
  Avatar,
  AvatarBadge,

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

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

带图标的徽章

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

import {
  Avatar,
  AvatarBadge,

头像组

使用 AvatarGroup 组件展示头像组。

import {
  Avatar,
  AvatarFallback,

头像组计数

使用 <AvatarGroupCount> 来显示头像组的计数。

import {
  Avatar,
  AvatarFallback,

带图标的头像组计数

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

import {
  Avatar,
  AvatarFallback,

尺寸

使用 size 属性来改变头像大小。

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export function AvatarSizeExample() {

下拉菜单

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

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

API 参考

Avatar

Avatar 组件是包装头像图像和回退内容的根组件。

AvatarImage

AvatarImage 组件用于显示头像图像。它接受所有 Base UI 头像图像属性。

AvatarFallback

AvatarFallback 组件在图像加载失败时显示回退内容。它接受所有 Base UI 头像回退属性。

AvatarBadge

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

AvatarGroup

AvatarGroup 组件显示带有重叠样式的头像组。

AvatarGroupCount

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

更多有关 Base UI 头像属性的信息，请参阅 Base UI 文档。