MUIの勉強記録 3 ~Avatar component~

Avatar

LINEやtwitterのアイコンのようなUIを作成できる。

まずはアバターのモジュールをインポートしておく。最低限これをインポートしておく。ここから各々必要に応じてインポートする。

    import as React from "react";
    import Avatar from '@mui/material/Avatar';

画像アバター

alt属性は画像が表示できない場合に代わりに表示する文字列。 srcに表示したい画像のパスを指定する。

<Avatar alt="You" src="/~/~/you.jpg" />

文字のアバター

文字のアバター(ツイッターなどのアイコン)は、文字列を渡すと作成できる。sx属性(cssの設定ができる。)にbgcolorでアイコン背景の色を指定できる。カラーは各々必要な色をインポートしておく。今回は"deepOrange"をインポートした。

※なお、カラーについては MUI Color公式ページ sx属性についてはsx属性 MUI公式ページに掲載。

import { deepOrange } from '@mui/material/colors';
<Avatar>H</Avatar>
<Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>

size

アバターのサイズを変更できる。

    <Avatar
    alt="You"
    src="~/~/image.jpg"
    sx={{width:24,height:24}}
    />

以下のようにsx内にbgcolorとsizeの変更を同時にすることもできる。

   
import { deepOrange } from "@mui/material/colors"
<Avatar
    sx={{width:24, height:24, bgcolor:deepOrange[500]}}
/>

アイコンアバター

フォルダのアイコンなどのアイコンをインポートしてアバターの画像として使うことができる。icons-materialをインストールしていなければ以下のコマンドを打ち込んでインストールする。

// with npm
npm install @mui/icons-material

// with yarn
yarn add @mui/icons-material

使いたいアイコンをインポートしてアバタータグの中にタグとして設定する。

import FlderIcon from '@mui/icons-material/Folder'
import PageviewIcon from '@mui/icons-material/Pageview'
<Avatar>
    <FolderIcon />
</Avatar>
    
<Avatar>
    <PageviewIcon />
</Avatar>

ほかにもたくさんのiconのテンプレートがある。ここに アイコンの一覧が見れる公式ページがある。

形のあるアイコン

正方形や、角に丸みを帯びた形のアバターが使える。"variant"に指定する。variantにroundedを指定すると角の丸い正方形が表示される。

    <Avatar variant="square">
      N
    </Avatar>

アバターグループ

通常表示

グループ内に複数の人がいるときに重ねて表示します。maxに表示する最大の数を入れます。

    import AvatarGroup from '@mui/material/AvatarGroup';
    
    <AvatarGroup max={4}>
      <Avatar>A</Avatar>
      <Avatar>B</Avatar>
      <Avatar>C</Avatar>
      <Avatar>D</Avatar>
      <Avatar>E</Avatar>
    </AvatarGroup>

アバターの数制御

表示されていないアバターの数を制御することができる。 totalに書いた数、アバターが存在しているような表示になります使いどころがいまいちわかりませんでした。

    import AvatarGroup from '@mui/material/AvatarGroup'
    <AvatarGroup total={10}>
      <Avatar>A⁢/Avatar>
      <Avatar>B⁢/Avatar>
      <Avatar>C⁢/Avatar>
      <Avatar>D⁢/Avatar>
    </AvatarGroup>
    

 

Avatarコンポーネントは複数の人が出てくるアプリで重宝しそうですね。公式ページにはバッジ付きの説明もあるのですが、先にstyledを学んでから戻ってこようと思います。なので次回はstyledを更新します。お疲れさまでした。