Avatar

人物やチームを、名前と一緒に示します。

田田中 遥
佐佐藤 健
編仕事場の案内を担当する編集チーム
AMAlex Morgan
田行内の担当者
編プロフィール
山画像の読み込み状態
人数と残りの人数
田佐2人
田佐編3人
田佐編並べきれない人数を添える
大きさと画像の混在
美健小さいアバター(一覧の行やスレッドの見出し)
AM山編大きいアバターと画像
名前の文と並べる

美健田森 美咲、佐藤 健、田中 遥が参加しています

右から左に読む場合
لعليلى وعمر وثلاثة آخرون

使いどころ

  • 担当者や参加者など、人やチームを名前と一緒に示す時に使います。
  • 複数の人をまとめて示す時は AvatarGroup で並べます。
  • 一人を大きなアバターと名前で見出しにする時は ProfileHeader を使います。

使い方

name と initials を渡します。アバターは枠の無い円で、写真が無い時は塗った円に白い太字の略称を置きます。tone が既定の blue の時は灰色で塗ります。green・amber・coral を渡した時だけ緑・金茶・赤茶で塗ります。色だけで人を見分けさせず、隣に名前を書きます。

src を渡すと写真を円の中に重ねます。縁の線は引きません。AvatarController を avatar として登録すると、画像を読み込めた時だけ表示し、読み込み中と失敗した時は略称を残します。JavaScriptがない時は略称だけを表示します。

size は inline(20px、文の中)・small(22px、詰めた一覧)・default(30px、一覧の行)・large(48px)です。略称の文字は default で11px、inline・small で10px、large で16pxです。

AvatarGroup の中に Avatar を並べると、アバターを重ねずに2pxずつ空けて並べ、入らない時は折り返します。並べきれない人数は more で「+n」の表示にし、アバターの大きさにかかわらず高さ18pxの担当者のピル(平らな #eeeeee に灰色の11pxの文字、通常の太さ)に書いて、アバターの中央にそろえます。size は中のAvatarと同じ大きさを渡します。

アクセシビリティ

  • Avatar は role="img" で、name を名前にします。画像の alt は空にし、名前はアバターが持ちます。
  • AvatarGroup は role="group" で label を名前にします。「+n」の表示は読み上げないので、label に「ほか12名」のように残りの人数を含めます。

API

Avatar

Avatarのprops
名前型既定値説明
name必須string人やチームの名前。アバターの読み上げの名前(role="img"のaria-label)にする。
initials必須string画像がない時と読み込めない時にアバターに書く略称。一、二文字にする。
srcstring顔写真などのURL。AvatarControllerが読み込めたと確かめてから表示し、それまでは略称を見せる。
size"inline" | "small" | "default" | "large""default"アバターの大きさ。inlineは20px、smallは22px、defaultは30px、largeは48px。
toneAccent"blue"略称のアバターの塗り。人を見分ける補助で、名前の代わりにはしない。

ほかに、<span>へ標準のHTML属性を渡せます。

登録するcontroller:avatar(AvatarController)

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/avatar.css

Accent

値:"blue" | "green" | "amber" | "coral"

AvatarGroup

アバターを重ねずに少し空けて並べる。childrenにはAvatarだけを置く。

AvatarGroupのprops
名前型既定値説明
label必須stringまとまりの名前。読み上げで「誰と誰か」を伝える。
morenumber並べきれない残りの人数。最後に「+n」の灰色のピルで示す。
size"small" | "default" | "large""default"並べるAvatarと同じ大きさ。残りの人数のピルの高さをこの大きさにする。
childrenChild並べる Avatar。Avatar以外は置きません。

ほかに、<span>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/avatar-group.css

コード

HTML
Hono JSX