Material-UIのMenuコンポーネント

はじめに
完成形
サンプルコード
詳細
おしまい
- コメント

はじめに

Material-UIのMenuコンポーネントを使ってドロップメニューを実装するサンプルを動かしていたのでまとめていきます。

完成形

https://codesandbox.io/s/upbeat-turing-3fjnkq?file=/src/App.tsx

サンプルコード

Menuコンポーネントの基本的な形をつくるサンプルコードです。

import React, { useState } from "react";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Button from "@mui/material/Button";
import "./styles.css";

export default function App() {
  // メニューのアンカー要素の状態を管理するためのuseState
  const [menuAnchor, setMenuAnchor] = useState(null);

  // メニューを開くための関数
  // クリックされた要素（ボタン）をアンカー要素として設定
  const handleOpen = (event) => {
    setMenuAnchor(event.currentTarget);
  };

  // メニューを閉じるための関数
  // アンカー要素の状態をnullにリセット
  const handleClose = () => {
    setMenuAnchor(null);
  };

  return (
    <div className="App">
      <h1>Material-UI Menu Demo</h1>
      {/* メニューを開くためのボタン */}
      <Button variant="contained" color="primary" onClick={handleOpen}>
        Open Menu
      </Button>
      {/* Menuコンポーネントの定義 */}
      {/* anchorElにはアンカー要素の状態を、openにはメニューが開いているかどうかのブール値を渡す */}
      <Menu
        anchorEl={menuAnchor}
        open={Boolean(menuAnchor)}
        onClose={handleClose}
      >
        {/* メニューの各項目 */}
        {/* クリックされたらメニューを閉じる */}
        <MenuItem onClick={handleClose}>Choice A</MenuItem>
        <MenuItem onClick={handleClose}>Choice B</MenuItem>
        <MenuItem onClick={handleClose}>Choice C</MenuItem>
      </Menu>
    </div>
  );
}

詳細

コードブロックにも解説はありますが詳細を記載します。

Menuは、menuAnchorプロパティに設定されたHTML要素に対して相対的に配置されます。

メニューはユーザーがクリックした特定のボタンや他のUI要素のすぐ下に配置できます。

開閉の管理

openプロパティによってメニューの表示/非表示が制御されます。

真偽値で、trueであればメニューが開き、falseであれば閉じます。

メニューアイテム

MenuItemコンポーネントは、メニューの各項目を表現します。それぞれのメニューアイテムはクリック可能で、通常は特定のアクションをトリガーします。

おしまい

本記事の内容は以上になります！

プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky

Yanonoblog!

こつこつと