Material UI ドロップダウン作成

React.js と Material-UI を使用したプログラミング

このガイドでは、Material-UI ライブラリを使用して、React.js アプリケーション内で Appbar の下にドロップダウンメニューを表示する方法を説明します。

手順

1. 必要なライブラリのインストール まず、プロジェクトに Material-UI ライブラリをインストールします。ターミナルで次のコマンドを実行します：

   npm install @mui/material @emotion/react @emotion/styled
   

2. コンポーネントの作成 新しいコンポーネントを作成し、以下のように構成します：

   import * as React from 'react';
   import AppBar from '@mui/material/AppBar';
   import Box from '@mui/material/Box';
   import Toolbar from '@mui/material/Toolbar';
   import    IconButton from '@mui/material/IconButton';
   import MenuIcon from '@mui/icons-material/Menu';
   import Menu from '@mui/material/Menu';
   import MenuItem from '@mui/material/MenuItem';
   
   export default functio   n AppbarDropdownMenu() {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
       setAnchorEl(event.currentTarget);
     };
     const handleClose = () => {
       setAnchorEl(null);
     };
   
     return (
       <Box sx={{ flexGrow: 1 }}>
         <AppBar position="static">
           <Toolbar>
             <IconButton
               size="large"
               edge="start"
               color="inherit"
               aria-label="menu"
               sx={{ mr: 2 }}
               onClick={handleClick}
             >
               <MenuIcon />
             </IconButton>
           </T   oolbar>
         </AppBar>
         <Menu
           id="menu-appbar"
           anchorEl={anchorEl}
           anchorOrigin={{
             vertical: 'bottom',
             horizontal: 'left',
           }}
           keepMounted
           open={open}
           onClose={handleClose}
         >
           <MenuItem onClick={handleClose}>Profile</MenuItem>
           <MenuItem onClick={handleClose}>Account</MenuItem>
           <MenuItem onClick={handleClose   }>Dashboard</MenuItem>
         </Menu>
       </Box>
     );
   }
   

解説

• handleClose: メニューを閉じるためのハンドラーです。
• handleClick: メニューアイコンをクリックしたときに呼び出されるハンドラーです。
• useState: メニューの開閉状態を管理するための状態フックを使用します。
• MenuItem: メニューアイテムを定義します。
• Menu: ドロップダウンメニューを定義します。
• MenuIcon: メニューアイコンをレンダリングします。
• IconButton: メニューアイコン用のボタンを作成します。
• Toolbar: ツールバーを定義します。
• AppBar: アプリケーションバーを作成します。

カスタマイズ

• メニューアイテム
  • メニューアイテムのコンテンツを自由にカスタマイズできます。
  • 各メニューアイテムにクリックイベントハンドラーを割り当てることができます。
• メニューの位置とスタイル
  • anchorOrigin プロパティを使用してメニューの表示位置を調整できます。
  • sx プロパティを使用してメニューのスタイルをカスタマイズできます。

重要なポイント

• Material-UI のコンポーネントは、アクセシビリティとレスポンシブデザインを考慮して設計されています。
• React.js の状態管理とイベントハンドリングの基礎を理解していることが重要です。
• Material-UI のドキュメントを参照して、詳細な使用方法とカスタマイズオプションを確認してください。

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import    IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

export default functio   n AppbarDropdownMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
            onClick={handleClick}
          >
            <MenuIcon />
          </IconButton>
        </T   oolbar>
      </AppBar>
      <Menu
        id="menu-appbar"
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        keepMounted
        open={open}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>Account</MenuItem>
        <MenuItem onClick={handleClose   }>Dashboard</MenuItem>
      </Menu>
    </Box>
  );
}

1. 状態管理
   

   • useStateフックを使用して、ドロップダウンメニューの開閉状態を管理する anchorEl という状態変数を定義します。
   • open 変数は、メニューが開いているかどうかを示すフラグです。

2. イベントハンドラ
   

   • handleClick: メニューアイコンをクリックしたときに呼び出され、anchorEl にクリックされた要素を設定します。
   • handleClose: メニューを閉じるときに呼び出され、anchorEl を null に設定します。

3. UI コンポーネント
   

4. メニューの表示と位置
   

   • anchorEl の値に基づいて、Menu コンポーネントはメニューの表示位置を決定します。
   • anchorOrigin プロパティは、メニューのアンカーポイントを指定します。

Material UI ドロップダウン作成

Material UI では、Select コンポーネントを使用してドロップダウンメニューを作成できます。

import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function BasicSelect() {
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  r   eturn (
    <FormControl sx={{ m: 1, minWidth: 120 }}>
      <InputLabel id="demo-simple-sele   ct-label">Age</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={age}
        label="Age"
        onChange={handleChange}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirt   y</MenuItem>
      </Select>
    </F   ormControl>
  );
}

3. • FormControl: フォームコントロールを定義します。
   • InputLabel: ラベルテキストを表示します。

Popover コンポーネントは、特定の要素の上にポップアップを表示するのに適しています。Appbar のメニューアイコンをクリックしたときに、メニューをポップアップとして表示することができます。

import * as React from 'react';
import Button from '@mui/material/Button';
import Popover from '@mui/material/Popover';

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  cons   t handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefine   d;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizonta   l: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
      </Popover   >
    </div>
  );
}

カスタムフックの使用

カスタムフックを作成して、ドロップダウンメニューのロジックを再利用することができます。

import * as React from 'react';

function useDropdownMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(nu   ll);
  };

  return {
    anchorEl,
    handleClick,
    handleC   lose,
    open: Boolean(anchorEl),
  };
}

// ...

function MyComponent() {
  const { anchorEl, handleClick, handleClose, open } = useDropdownMenu();

  // ...
}

Autocomplete コンポーネントの使用

Autocomplete コンポーネントは、入力フィールドとドロップダウンリストを組み合わせたもので、検索機能も備えています。

import * as React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function    CountrySelect() {
  const [value, setValue] = React.useState(null);

  return (
    <Autocomplete
      disablePortal
      id="country-select"
      options={countries}
      getOptionLabel={(option) => option.label}
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      renderInput={(params) => (
        <TextField {...params} label="Country" />
      )}
    />
  );
}

カスタムドロップダウンの作成

Material UI のコンポーネントを組み合わせて、カスタムのドロップダウンを作成することもできます。

import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem fro   m '@mui/material/MenuItem';

export default functio   n CustomDropdown() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Butt   on onClick={handleClick}>Open Menu</Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose   }>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}