头像

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 {

RTL (从右至左)

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

"use client"

import * as React from "react"

API 参考

头像

Avatar 组件是包裹头像图像和回退状态的根组件。

AvatarImage

AvatarImage 组件用于显示头像图像。它接受所有 Radix UI Avatar Image 的属性。

AvatarFallback

AvatarFallback 组件用于在图像加载失败时显示回退内容。它接受所有 Radix UI Avatar Fallback 的属性。

AvatarBadge

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

AvatarGroup

AvatarGroup 组件用于显示一组重叠样式的头像。

AvatarGroupCount

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

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