アバターグループAvatarGroupExperimental
複数のアバターを重ねて表示し、表示しきれない人数を +N とメンバー一覧で確認できるグループ表示です。
プレビュー
状態とバリエーション
+N 表示
max を指定すると、表示しきれない人数を +N としてまとめます。長い一覧ではツールチップを最大 5 名までに抑え、クリックでメンバー一覧を開けます。
青
田
山
小
中
名前のツールチップ
省略表示でも誰か分かるように、各アバターのツールチップに名前を渡します。
青
田
山
小
在席表示
在席状態を表示する場合は、ツールチップに名前と状態を含めます。
青
田
山
小
重なりを強める
表やサイドバーなど横幅が狭い場所では、overlap を大きくして省スペースにできます。
青
田
山
小
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| max | number | - | +N 表示にまとめる前に表示する最大人数です。 |
| overlap | number | 8 | 隣り合うアバターを重ねる幅です。 |
| avatarClassName | string | - | 各アバターの外側ラッパーに付与する className です。 |
| overflowTooltip | ReactNode | - | +N 表示にまとめたメンバーを説明するツールチップです。 |
| overflowContent | ReactNode | - | +N 表示をクリックした時に開くポップオーバーの内容です。全メンバー一覧などを渡します。 |
| overflowAriaLabel | string | - | クリック可能な +N 表示のアクセシブルラベルです。 |
| overflowContentClassName | string | - | +N 表示のポップオーバー内容に付与する className です。 |
| overflowPortalContainer | HTMLElement | null | - | +N 表示のポップオーバーを描画するポータル先です。 |
| overflowContentSide | "top" | "right" | "bottom" | "left" | "bottom" | +N 表示のポップオーバーを開く方向です。 |
| overflowContentAlign | "start" | "center" | "end" | "end" | +N 表示のポップオーバーの揃え位置です。 |
| overflowContentAvoidCollisions | boolean | - | +N 表示のポップオーバーを画面端で反転させるかどうかです。 |
使い方
Loading...