Avatar

Avatarは、ユーザーを表すプロフィール写真やイニシャルのアイコンを表示するコンポーネントです。

インポート

import { Avatar, AvatarBadge, AvatarGroup } from "@yamada-ui/react"

Copied!

Avatar: ユーザーを表す画像のコンポーネントです。
AvatarBadge: アバターの隅にコンテンツを表示するコンポーネントです。
AvatarGroup: 複数のアバターをスタックするためのラッパーコンポーネントです。

使い方

編集可能な例

<Avatar
  name="Hirotomo Yamada"
  src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>

Copied!

サイズを変更する

編集可能な例

<Wrap gap="md">
  <Avatar size="2xs" name="Hirotomo Yamada" />
  <Avatar size="xs" name="Hirotomo Yamada" />
  <Avatar size="sm" name="Hirotomo Yamada" />
  <Avatar size="md" name="Hirotomo Yamada" />
  <Avatar size="lg" name="Hirotomo Yamada" />
  <Avatar size="xl" name="Hirotomo Yamada" />
  <Avatar size="2xl" name="Hirotomo Yamada" />
</Wrap>

Copied!

イニシャルを表示する

nameに文字列を設定すると、イニシャルと設定された文字列に基づいてランダムな背景色を生成します。

もし、イニシャルを整形したい場合は、formatを使います。

もし、背景色をカスタマイズしたい場合は、bg, background, backgroundColorで色を指定します。

編集可能な例

<Wrap gap="md">
  <Avatar name="Hirotomo Yamada" />

  <Avatar
    name="Hirotomo Yamada"
    format={(name) => {
      const names = name.split(" ")
      const firstName = names[0] || ""
      const lastName = names.length > 1 ? names[names.length - 1] : ""

      return firstName && lastName
        ? `${lastName.charAt(0)}${firstName.charAt(0)}`
        : firstName.charAt(0)
    }}
  />
</Wrap>

Copied!

画像を表示する

アバターに画像を表示したい場合は、srcにパスを設定します。

編集可能な例

<Avatar src="https://avatars.githubusercontent.com/u/84060430?v=4" />

Copied!

バッジをつける

アプリケーションによっては、ユーザーがオンラインかどうかを表示することがあります。その場合は、AvatarBadgeコンポーネントを使用します。

placementを設定することで、バッジの表示位置を変更できます。デフォルトは、"bottom-end"です。

編集可能な例

<Wrap gap="md">
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="primary" />
  </Avatar>

  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="secondary" placement="top-start" />
  </Avatar>

  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="green" placement="top-end" />
  </Avatar>

  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="pink" placement="bottom-start" />
  </Avatar>

  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="red" placement="bottom-end" />
  </Avatar>
</Wrap>

Copied!

バッジをハイライトする

編集可能な例

<Avatar
  name="Hirotomo Yamada"
  src="https://avatars.githubusercontent.com/u/84060430?v=4"
>
  <AvatarBadge bg="primary" ping pingColor="primary.300" pingScale={2} />
</Avatar>

Copied!

バッジをスタイリングする

編集可能な例

<Avatar
  name="Hirotomo Yamada"
  src="https://avatars.githubusercontent.com/u/84060430?v=4"
>
  <AvatarBadge bg="red" borderColor="white" />
</Avatar>

Copied!

フォールバック

srcの読み込みが失敗した場合は、2つのフォールバックがあります。

nameがある場合: イニシャルと設定された文字列に基づいてランダムな背景色を使用します。
nameがない場合: デフォルトのアバターのアイコンを使用します。

編集可能な例

<Wrap gap="md">
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar name="Hirotomo Yamada" src="https://not-found.com" />
  <Avatar src="https://not-found.com" />
</Wrap>

Copied!

フォールバックをカスタマイズする

フォールバックのアイコンや背景色をカスタマイズした例です。

編集可能な例

<Wrap gap="md">
  <Avatar bg="secondary" src="https://not-found.com" />
  <Avatar icon={<Ghost />} src="https://not-found.com" />
</Wrap>

Copied!

アバターグループ

表示するアバターの数を制御する場合は、maxに数値を指定します。指定された数以上のアバターが存在する場合は、切り詰めて残りのアバターを+Xのように表示されます。

編集可能な例

<AvatarGroup max={3}>
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
</AvatarGroup>

Copied!

GitHubでこのページを編集する

前Fontawesome Icon 次Indicator