Avatar

import {
  Avatar,
  AvatarBadge,

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add avatar
コピー

使い方#

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

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

構成#

次の構成を使用して、Avatar を構築します。

コピーAvatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

次の構成を使用して、AvatarGroup を構築します。

コピーAvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

基本#

画像とフォールバックを備えた基本的なアバター コンポーネント。

import {
  Avatar,
  AvatarFallback,

バッジ#

AvatarBadge コンポーネントを使用して、アバターにバッジを追加します。バッジはアバターの右下に配置されます。

import {
  Avatar,
  AvatarBadge,

className プロップを使用して、カスタム色、サイズなどのカスタム スタイルをバッジに追加します。

コピー<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 { PlusIcon } from "lucide-react"

import {

アバターグループ#

AvatarGroup コンポーネントを使用して、アバターのグループを追加します。

import {
  Avatar,
  AvatarFallback,

アバター グループ数#

<AvatarGroupCount> を使用して、グループにカウントを追加します。

import {
  Avatar,
  AvatarFallback,

アイコン付きアバター グループ#

<AvatarGroupCount> 内のアイコンを使用することもできます。

import { PlusIcon } from "lucide-react"

import {

サイズ#

アバターのサイズを変更するには、size プロップを使用します。

import {
  Avatar,
  AvatarFallback,

ドロップダウン#

Avatar コンポーネントをドロップダウン メニューのトリガーとして使用できます。

"use client"

import {

RTL#

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import * as React from "react"

API リファレンス#

アバター#

Avatar コンポーネントは、アバター イメージとフォールバックをラップするルート コンポーネントです。

アバター画像#

AvatarImage コンポーネントはアバター画像を表示します。すべての Base UI Avatar Image プロップを受け入れます。

アバターフォールバック#

AvatarFallback コンポーネントは、画像のロードに失敗した場合にフォールバックを表示します。すべての Base UI Avatar Fallback プロップを受け入れます。

アバターバッジ#

AvatarBadge コンポーネントは、アバター上にバッジ インジケーターを表示します。通常は右下に配置されます。

アバターグループ#

AvatarGroup コンポーネントは、スタイルが重なったアバターのグループを表示します。

アバターグループ数#

AvatarGroupCount コンポーネントは、アバター グループ内のカウント インジケーターを表示し、通常は追加のアバターの数を示します。

Base UI Avatar のプロップの詳細については、Base UI ドキュメント を参照してください。