Material UIのDrawerでサイドバーを作る最もシンプルな例

3614 ワード
サイドバー drawer MaterialUI React React テキストリンク

はじめに

サイドバーを作ろうと思って、Material UIのDrawerを使おうとしたとき、公式のリファレンスが載せているコードが盛り沢山でどこが最小限なのかわからん！になったので最もシンプルな形を目指してみました。

環境

  • Material UI v4.11.3
  • react v17.0.1

最もシンプルを目指してみた


import React, {useState} from 'react';
import Drawer from '@material-ui/core/Drawer';

export default function TemporaryDrawer() {

    const [open, setopen] = useState(false);
    const toggleOpen=() => {
        setopen(!open);
    }
    return(
        <>
            <button onClick={toggleOpen}>hoge</button>
            <Drawer anchor='left' open={open} onClose={toggleOpen}>
                <p>hello</p>
            </Drawer>
        </>
    );
}

これだけのコードでボタンを押して開いてサイドバー以外をクリックすると閉じるナビゲーションドロワーを実現することができます。

anchor = 'left'をtop, right, bottomにするとそれぞれ上から、右から、下から出てくるように変更できます。

上のコードでの表示をみてみるとこんな感じ

ナビゲーションドロワーの幅を指定する必要はありそうですが、あとは<Drawer />の子要素を変更するだけで素敵なナビゲーションドロワーを作れます！！