ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Badgeの各プロパティの解説

MUIでのBadgeの扱い方の説明です。
バッジです。
バッジは右上についている数字です。
よくある使い方はメールアイコンの右上にバッジで数字を表示し2通のメールが来ているよ。などの情報を表示します。
アイコンについてはMUIでマテ リアルアイコンを使ういくつかの方法を見てください。
const Badge = MaterialUI.Badge;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" />,'Mail');
ReactDOM.render(
<Badge badgeContent={2} color="primary"><TukuttaIcon /></Badge>
, document.getElementById('sample')
);
これ以降のサンプルでは可能な限り簡単なサンプルにするためアイコンは使いません。

anchorOrigin

BadgeのanchorOriginの使い方の説明です。
直前の説明で右上の数字と言っていましたが実は表示する位置を上下井左右に変えられます。
上下はverticalのtopかbottomで、左右はhorizontalのrightかleftで変更します。
未設定のデフォルトはtopのrightになります。
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div>
  <div style={{"margin":"1rem"}}>
    <Badge anchorOrigin={{"vertical":"top","horizontal":"right",}} badgeContent={2} color="primary">上右</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
  <Badge anchorOrigin={{"vertical":"top","horizontal":"left",}} badgeContent={2} color="primary">上左</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
  <Badge anchorOrigin={{"vertical":"bottom","horizontal":"right",}} badgeContent={2} color="primary">下右</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
  <Badge anchorOrigin={{"vertical":"bottom","horizontal":"left",}} badgeContent={2} color="primary">下左</Badge>
  </div>
</div>
, document.getElementById('sample')
);

badgeContent

BadgeのbadgeContentの使い方の説明です。
バッジに表示する文字を設定します。
ノードを指定できるので数字でなくても構いません。
サンプルの1つ目は標準的な数字を設定しています。
2つ目はノードを設定しています。SAPN要素で文字色を赤に変更しています。
3つ目は計算式を設定してその結果を表示しています。
4つ目は文字列を設定しています。
const Badge = MaterialUI.Badge;
const TukuttaSpan = <span style={{"color":"red"}}>三</span>;
ReactDOM.render(
<div>
  <div style={{"margin":"1rem"}}>
    <Badge badgeContent={2} color="primary">数字</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge badgeContent={TukuttaSpan} color="primary">作ったノード</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge badgeContent={2*2} color="primary">2*2の計算</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge badgeContent="壱" color="primary">文字列</Badge>
  </div>
</div>
, document.getElementById('sample')
);

children

Badgeのchildrenの使い方の説明です。
バッジを表示する対象の要素を指定できます。
サンプルではSPAN要素で赤文字の「チルドレン」を作って指定しています。
const Badge = MaterialUI.Badge;
const TukuttaSpan = <span style={{"color":"red"}}>チルドレン</span>;
ReactDOM.render(
  <Badge children={TukuttaSpan} badgeContent={2} color="primary" />
, document.getElementById('sample')
);

classes

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

color

Badgeのcolorの使い方の説明です。
色の設定はcolorで行います。
使えるのはdefault、primary、secondary、success、error、info、warning、それと自分で作った色です。
自分で色を作る場合は変数で定義しThemeProviderで適用します。
未設定のデフォルトはdefaultになります。
const ThemeProvider = MaterialUI.ThemeProvider;
const createTheme   = MaterialUI.createTheme;
const tukuttaTheme = createTheme({
  palette: {
    tukuttaIro: {
      main: '#ff00ff',
    },
  },
});
ReactDOM.render(
<ThemeProvider theme={tukuttaTheme}>
  <div style={{"margin":"1rem"}}>
      <Badge badgeContent={2} color="default" >default</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
      <Badge badgeContent={2} color="primary" >primary</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
      <Badge badgeContent={2} color="secondary" >secondary</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
      <Badge badgeContent={2} color="success" >success</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
      <Badge badgeContent={2} color="error" >error</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
      <Badge badgeContent={2} color="info" >info</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
      <Badge badgeContent={2} color="warning" >warning</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
      <Badge badgeContent={2} color="tukuttaIro" >tukuttaIro</Badge>
  </div>
</ThemeProvider>
, document.getElementById('sample')
);

component

Badgeのcomponentの使い方の説明です。
※注意してください。componentとは別にcomponentsという複数形のプロパティも存在します。
バッジを表示するおおもとの要素を指定できます。
通常はおおもととバッジ自体の両方ともSPAN要素で生成されます。
デフォルトのBadgeはおおもとがSPANで生成されます。
サンプルではB要素を指定したのでB要素で作られていることが分かります。
BadgeのおおもとがB要素で生成されます
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div style={{"margin":"1rem"}}>
  <Badge component="b" badgeContent={2} color="primary">コンポーネント</Badge>
</div>
, document.getElementById('sample')
);

components

Badgeのcomponentsの使い方の説明です。
※注意してください。componentsとは別にcomponentという単体のプロパティも存在します。
バッジを表示するおおもとの要素とバッジ自体の要素を指定できます。
通常はおおもととバッジ自体の両方ともSPAN要素で生成されます。
デフォルトのBadgeはおおもとがSPANで生成されます。
サンプルではおおもとをB要素、バッジをI要素に設定しています。
そのためおおもとは太字に、バッジは斜字で表示されます。
BadgeのおおもとがB要素で生成され、バッジ自体はI要素で生成ます
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div style={{"margin":"1rem"}}>
  <Badge components={{"Badge":"i","Root":"b"}} badgeContent={2} color="primary">コンポーネンツ</Badge>
</div>
, document.getElementById('sample')
);

componentsProps

BadgeのcomponentsPropsの使い方の説明です。
componentsで指定した要素の属性を設定できます。
サンプルではおおもとをB要素、バッジをI要素に設定しています。
そしておおもとは青字で、バッジは赤字で表示します。
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div style={{"margin":"1rem"}}>
  <Badge componentsProps={{"badge":{"style":{"color":"red"}},"root":{"style":{"color":"blue"}}}} components={{"Badge":"i","Root":"b"}} badgeContent={2} color="primary">コンポーネンツ</Badge>
</div>
, document.getElementById('sample')
);

invisible

Badgeのinvisibleの使い方の説明です。
バッジを表示するかの設定です。
※注意してください。ブール値を渡さなければいけないためinvisible="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。invisibleと書くだけでinvisible={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div>
  <div style={{"margin":"1rem"}}>
    <Badge invisible={true} badgeContent={2} color="primary">true</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge invisible={false} badgeContent={2} color="primary">false</Badge>
  </div>
</div>
, document.getElementById('sample')
);

max

Badgeのmaxの使い方の説明です。
表示する数字の最大値を設定します。これを越えた場合はmaxの値に「+」が付け加えられて「2+」のようなかたちで表示されます。
未設定のデフォルトは99です。
サンプルの1つ目はmax2で数値も2なのでそのまま表示されています。
2つ目はmax2で数値が3のために最大値のmax2に+が付け加えられて表示されています。
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div>
  <div style={{"margin":"1rem"}}>
    <Badge max={2} badgeContent={2} color="primary">true</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge max={2} badgeContent={3} color="primary">false</Badge>
  </div>
</div>
, document.getElementById('sample')
);

overlap

Badgeのoverlapの使い方の説明です。
Badgeを表示する位置を微調整します。
circularかrectangularを指定できます。
circularはおおもとが丸い場合にそのふちの線上に来るように配置されます。
rectangularはおおもとが四角い場合にそのすみの角に来るように配置されます。
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div>
  <div style={{"margin":"1rem"}}>
    <Badge overlap="circularbadgeContent={2} color="primarysx={{"border":1,"borderRadius":8}}>
      <div style={{"padding":"10px"}}>丸</div>
    </Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge overlap="rectangularbadgeContent={2} color="primarysx={{"border":1}}>
      <div style={{"padding":"10px"}}>四角</div>
    </Badge>
  </div>
</div>
, document.getElementById('sample')
);
サンプルをあえて逆にするとその微妙な違いがわかります。
下のサンプルは上のサンプルのoverlapを入れ替え、丸にrectangularを、四角にcircularを指定しています。
上のサンプルとは違い微妙に収まりが悪いことが分かります。
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div>
  <div style={{"margin":"1rem"}}>
    <Badge overlap="rectangularbadgeContent={2} color="primarysx={{"border":1,"borderRadius":8}}>
      <div style={{"padding":"10px"}}>丸</div>
    </Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge overlap="circularbadgeContent={2} color="primarysx={{"border":1}}>
      <div style={{"padding":"10px"}}>四角</div>
    </Badge>
  </div>
</div>
, document.getElementById('sample')
);

showZero

BadgeのshowZeroの使い方の説明です。
バッジの数字が0の場合に表示するかの設定です。
showZeroがfalseの場合、バッジの数字のbadgeContentが0の場合には自動的にinvisibleがtrueになり表示されなくなります。
0のときにどうするかの設定なのでbadgeContentが0以外の時はshowZeroをfalseにしても当然表示されます。
※注意してください。ブール値を渡さなければいけないためshowZero="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。showZeroと書くだけでshowZero={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの1つ目はtrueなのでバッジの数字が0でも表示されます。
2つ目はfalseでバッジの数字が0なので表示されません。
3つ目はfalseですがバッジの数が1なので表示されています。
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div>
  <div style={{"margin":"1rem"}}>
    <Badge showZero={true} badgeContent={0} color="primary">零true</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge showZero={false} badgeContent={0} color="primary">零false</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge showZero={false} badgeContent={1} color="primary">falseでも壱は表示</Badge>
  </div>
</div>
, document.getElementById('sample')
);

sx

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

variant

Badgeのvariantの使い方の説明です。
バッジの表示を中に数字を表示する大きな●か、数字のない小さな●にするかの設定です。
文字列でdotを設定すると数字のない小さな●になります。
const Badge = MaterialUI.Badge;
ReactDOM.render(
<div>
  <div style={{"margin":"1rem"}}>
    <Badge variant="dotbadgeContent={2} color="primary">dot</Badge>
  </div>
  <div style={{"margin":"1rem"}}>
    <Badge variant="standardbadgeContent={2} color="primary">standard</Badge>
  </div>
</div>
, document.getElementById('sample')
);
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
戻る

全体目次