ふかしぎのReactさんぷるず

AvatarGroupの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/02/15
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.4.1 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Avatar } from '@mui/material';
import { AvatarGroup } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Avatar = MaterialUI.Avatar;
const AvatarGroup  = MaterialUI.AvatarGroup;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

AvatarGroupの各プロパティの解説

MUIでのアバターグループの扱い方の説明です。
Avatarコンポーネントを少し重ねていい感じにまとめて表示する機能です。
重ねて表示するMUIの内部的な都合上デフォルトで右端に寄ってしまいます。
いちいち右側に寄ってしまうと見づらいので以降のサンプルでは左寄せにします。
CSSでdisplay:flexとすれば左寄せになります。
<div style={{"display":"flex"}}>
  <AvatarGroup>
    <Avatar>あ</Avatar>
    <Avatar>ば</Avatar>
    <Avatar>た</Avatar>
    <Avatar>ー</Avatar>
  </AvatarGroup>
</div>
もし中央に表示したいのならCSSでdisplay:flexとjustify-content:centerで中央揃えになります。
<div style={{"display":"flex","justifyContent":"center"}}>
  <AvatarGroup>
    <Avatar>あ</Avatar>
    <Avatar>ば</Avatar>
    <Avatar>た</Avatar>
    <Avatar>ー</Avatar>
  </AvatarGroup>
</div>

children

Avatarのchildrenの使い方の説明です。
表示するアバターをノードで渡せます。
複数ある場合は配列で渡します。
const tukuttaAvatar = 
  [
    <Avatar>あ</Avatar>,
    <Avatar>ば</Avatar>,
    <Avatar>た</Avatar>,
    <Avatar>ー</Avatar>
  ];
ReactDOM.render(
<div style={{"display":"flex"}}>
<AvatarGroup children={tukuttaAvatar}/>
</div>
, document.getElementById('sample')
);

classes

AvatarGroupのclassesの使い方の説明です。
CSSの設定を上書きします。

componentsProps

AvatarGroupのcomponentsPropsの使い方の説明です。
AvatarGroupが追加したAvatarのプロパティーを設定できます。
AvatarGroupの場合maxで設定した+1などが追加表示になります。
サンプルはstyleで赤文字を追加しています。
<div style={{"display":"flex"}}>
  <AvatarGroup max="2" componentsProps={{"additionalAvatar":{"style":{"color":"red"}}}}>
    <Avatar>あ</Avatar>
    <Avatar>ば</Avatar>
    <Avatar>た</Avatar>
    <Avatar>ー</Avatar>
  </AvatarGroup>
</div>

max

AvatarGroupのmaxの使い方の説明です。
Avatarの数が多いと省略表示できます。
その際に省略する前をいくつ表示するかを指定できます。
省略されたアバターは+1など+数字の形で末尾に追加表示されます。
このmaxはその追加表示される分も含めての数字になります。
サンプルの1つ目はmaxを2に設定しているので1つ分と追加表示の+3の2つが表示されています。
デフォルトは5です。
サンプルの2つ目は「あばたーかきくけこ」のAvatarを設定していますがデフォルトの5にひっかかり、あばたー以降は省略表示されています。
<div>
  <div style={{"display":"flex"}}>
    <AvatarGroup max="2">
      <Avatar>あ</Avatar>
      <Avatar>ば</Avatar>
      <Avatar>た</Avatar>
      <Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup>
      <Avatar>あ</Avatar>
      <Avatar>ば</Avatar>
      <Avatar>た</Avatar>
      <Avatar>ー</Avatar>
      <Avatar>か</Avatar>
      <Avatar>き</Avatar>
      <Avatar>く</Avatar>
      <Avatar>け</Avatar>
      <Avatar>こ</Avatar>
    </AvatarGroup>
  </div>
</div>

spacing

AvatarGroupのspacingの使い方の説明です。
Avatar同士の隙間を設定できます。
small、medium、もしくは数値を指定できます。
デフォルトはmediumです。
数値の場合はその分だけmargin-leftでマイナス指定します。つまり数値が大きくなるほど間隔が狭まります。
<div>
  <div style={{"display":"flex"}}>
    <AvatarGroup spacing="small">
      <Avatar>small</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup spacing="medium">
      <Avatar>medium</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup spacing="1">
      <Avatar>1</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup spacing="5">
      <Avatar>5</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup spacing="10">
      <Avatar>10</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup spacing="15">
      <Avatar>15</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
</div>

sx

AvatarGroupのsxの使い方の説明です。が他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

total

AvatarGroupのtotalの使い方の説明です。
maxで省略表示する場合にどうせ表示しないのなら最初からノードを作らなければ速くなるじゃない。という考えで使うのがtotalです。
コストを気にしないのならこれを使う必要はありません。全部レンダリングしてmaxで表示数を絞ればいいだけです。
ですが50億個あった場合に2つだけ表示するのと、2つだけある場合に2つだけ表示するのでは大きく違いが出ます。
サンプルは上下とも同じ表示ですが中身は違います。2つ目はAvatarが2つしかありません。
<div>
  <div style={{"display":"flex"}}>
    <AvatarGroup max="3">
      <Avatar>あ</Avatar>
      <Avatar>ば</Avatar>
      <Avatar>た</Avatar>
      <Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup max="3" total="4">
      <Avatar>あ</Avatar>
      <Avatar>ば</Avatar>
    </AvatarGroup>
  </div>
</div>

variant

AvatarGroupのvariantの使い方の説明です。
Avaterを表示する形をここで一括指定できます。
Avaterで個別指定しても同じことができます。
設定できるのはcircular、rounded、square、そして定義した文字列です。
circularは丸
roundedは四隅を少し丸める。微妙過ぎて四角と見分けがつきません。
squareは四角です。
サンプルは上から、circular、rounded、square、Avaterの方で個別にvariantを指定した場合です。
<div>
  <div style={{"display":"flex"}}>
    <AvatarGroup variant="circular">
      <Avatar>あ</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup variant="rounded">
      <Avatar>あ</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup variant="square">
      <Avatar>あ</Avatar><Avatar>ば</Avatar><Avatar>た</Avatar><Avatar>ー</Avatar>
    </AvatarGroup>
  <div style={{"display":"flex"}}>
    <AvatarGroup>
      <Avatar variant="circular">あ</Avatar><Avatar variant="rounded">ば</Avatar><Avatar variant="square">た</Avatar><Avatar variant="circular">ー</Avatar>
    </AvatarGroup>
  </div>
  </div>
</div>
roundedはデフォルトでborder-radiusが4pxしかないので微妙です。個人的には8pxぐらいあってもいいんじゃないの?と思ってしまいます。
サンプルは上からrounded、radiusが4px(=roundedと同じ)、radiusが8pxです。
<div>
  <div style={{"display":"flex"}}>
    <AvatarGroup variant="rounded">
      <Avatar>あ</Avatar><Avatar>ば</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup variant="rounded">
      <Avatar sx={{"borderRadius":"4px"}}>4px</Avatar><Avatar sx={{"borderRadius":"4px"}}>ば</Avatar>
    </AvatarGroup>
  </div>
  <div style={{"display":"flex"}}>
    <AvatarGroup variant="rounded">
      <Avatar sx={{"borderRadius":"8px"}}>8px</Avatar><Avatar sx={{"borderRadius":"8px"}}>ば</Avatar>
    </AvatarGroup>
  </div>
</div>
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次