Avatar

import {
  Avatar,
  AvatarBadge,

安装

pnpmnpmyarnbun
pnpm dlx shadcn@latest add avatar
复制

用法

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 {

RTL

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

"use client"

import * as React from "react"

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 文档。