😸

【MUI】コピペで使える逆引きUI集(随時更新)

3 min read

はじめに

自作アプリケーションを作りたい。作るなら見た目はカッコよく作りたいと思いMUIの学習を始めました。MUIは大量にUIが利用できて自由度が高いのが素晴らしいポイントです。しかし、初学者としては自由度が高すぎて実現したいUIがすぐに見つからない。見つけてもどうやって書くか忘れてまた調べる。それが面倒なので備忘として便利なMUIをココに残していこうと思います。

※誤りやもっと良い方法がある等ありましたらコメントでご指摘いただければ幸いです

MUIの基本(逆引きだけでわからない場合は参照)

icon

アイコンの基本的な利用方法やイメージは以下のリンク(パッケージインストールが必要です)

https://mui.com/components/icons/#main-content
iconsの検索は下のリンクから(どんなアイコンがあるのか見るだけでも面白い)
https://mui.com/components/material-icons/

Color

MUIでは色が用意されていて500や600など、数字で指定できるので色を準備する必要はない。(もちろん自分で準備もできる)
MUIで用意されている色一覧は以下のリンク

https://mui.com/customization/color/#main-content

ファイルアップロードボタン・アイコンボタン・アイコン付きボタン・ローディングボタン等

公式のサイトにあるものをコピペすればすぐに実現できる!
以下のButtonコンポーネントのページに載ってます。コードの例は

https://mui.com/components/buttons/

MUI公式の見方

以下キャプチャの右下にある<>でコードを確認できます。
隣の立方体はcodesandboxというサイトに飛んで実際にコードを触ることができます。書き換えたりして動きを確認できる!
image.png

逆引き

ラベル付き○○

チェックボックス・ラジオボタン・テキストフィールドにラベルを付けたい。また、ラベルをクリックしてテキストフィールドにフォーカスさせたい。

イメージ

ラベル付き○○.png

コード

<FormControlLabel
  labelPlacement="end" //ラベルの開始位置を選べる
  label="ラベルだよ"
  control={<Checkbox name="checkboxA" color="primary" />} //controlProp の中にMUIを定義する
/>

公式リンク

FormControlLabel APIのページ

https://mui.com/api/form-control-label/#main-content

アバターアイコン

イメージ

アバターアイコン.png

コード

<Avatar sx={{ bgcolor: teal[400] }}> // 色はcolorsからimportして利用する
  <LockOutlinedIcon /> // 好きなiconsをインポートして利用する
</Avatar>

公式リンク

Avatar のページ

https://mui.com/components/avatars/#main-content

通販のショッピングカートボタン

ヘッダーとかにあって、選択した商品がいくつあるか確認できるアイコンボタン

イメージ

image.png

コード

<IconButton>
  <Badge badgeContent={4} color="primary">
    <ShoppingCartIcon color="action" />
  </Badge>
</IconButton>

公式リンク

Badge のページ

https://mui.com/components/badges/#main-content

文字をクリックしたら開くドロップダウン

普通のドロップダウンではなくクリックした文字の下にドロップダウンを出す

イメージ

image.png

コード

	const [anchorEl, setAnchorEl] = useState(null);
	const openMenu = Boolean(anchorEl);
	const handleClick = (e) => {
	  setAnchorEl(e.currentTarget);
	};
	const handleClose = () => {
	  setAnchorEl(null);
	};

return (
	<Typography
	  sx={{ mr: "20px", cursor: "pointer", color: "#616161" }}
	  aria-controls="basic-menu"
	  aria-haspopup="true"
	  aria-expanded={openMenu ? "true" : undefined}
	  onClick={handleClick}
	>
	  Categories
	</Typography>
	{/* ドロップダウンアイテム */}
	<Menu
	  id="basic-menu"
	  anchorEl={anchorEl}
	  open={openMenu}
	  onClose={handleClose}
	>
	  <MenuItem onClick={handleClose}>Men</MenuItem>
	  <MenuItem onClick={handleClose}>Women</MenuItem>
	</Menu>
)

公式リンク

Menuのページ

https://mui.com/components/menus/
<hr/>
=================以下記事編集用

タイトル

イメージ

コード

公式リンク

Discussion

ログインするとコメントできます