头像

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 组件展示头像图片。它接受所有 Radix UI Avatar Image 属性。

AvatarFallback

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

AvatarBadge

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

AvatarGroup

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

AvatarGroupCount

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

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