9
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-10-23

はじめに

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

※初心者なので情報の正確性には自信がないです。表示されればOKという気持ちで書いています。誤りやもっと良い方法がある等ありましたらコメントでご指摘いただければ幸いです

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というwebサイトに飛んで実際にコードを触って動かすことができます。
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/


=================以下記事編集用 ## タイトル ### イメージ ### コード ### 公式リンク
9
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?