头像

import {
  Avatar,
  AvatarBadge,

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add avatar
Copy

用法

🌐 Usage

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

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

示例

🌐 Examples

基础

🌐 Basic

一个带有图片和备用显示的基本头像组件。

🌐 A basic avatar component with an image and a fallback.

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

export function AvatarDemo() {

徽章

🌐 Badge

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

🌐 Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

import {
  Avatar,
  AvatarBadge,

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

🌐 Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.

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

带图标的徽章

🌐 Badge with Icon

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

🌐 You can also use an icon inside <AvatarBadge>.

import {
  Avatar,
  AvatarBadge,

阿凡达集团

🌐 Avatar Group

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

🌐 Use the AvatarGroup component to add a group of avatars.

import {
  Avatar,
  AvatarFallback,

头像组数量

🌐 Avatar Group Count

使用 <AvatarGroupCount> 向组中添加计数。

🌐 Use <AvatarGroupCount> to add a count to the group.

import {
  Avatar,
  AvatarFallback,

带图标的头像组

🌐 Avatar Group with Icon

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

🌐 You can also use an icon inside <AvatarGroupCount>.

import {
  Avatar,
  AvatarFallback,

大小

🌐 Sizes

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

🌐 Use the size prop to change the size of the avatar.

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

export function AvatarSizeExample() {

下拉菜单

🌐 Dropdown

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

🌐 You can use the Avatar component as a trigger for a dropdown menu.

"use client"

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

头像

🌐 Avatar

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

🌐 The Avatar component is the root component that wraps the avatar image and fallback.

AvatarImage

AvatarImage 组件显示头像图片。它接受所有 Base UI Avatar Image 属性。

🌐 The AvatarImage component displays the avatar image. It accepts all Base UI Avatar Image props.

AvatarFallback

AvatarFallback 组件在图片加载失败时显示备用内容。它接受所有 Base UI Avatar Fallback 属性。

🌐 The AvatarFallback component displays a fallback when the image fails to load. It accepts all Base UI Avatar Fallback props.

AvatarBadge

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

🌐 The AvatarBadge component displays a badge indicator on the avatar, typically positioned at the bottom right.

AvatarGroup

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

🌐 The AvatarGroup component displays a group of avatars with overlapping styling.

AvatarGroupCount

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

🌐 The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.

有关 Base UI Avatar 属性的更多信息，请参见 Base UI 文档。

🌐 For more information about Base UI Avatar props, see the Base UI documentation.