React+MaterialUIでWebデザインを初めからStep2

前回の続きです。

今回の目標

  • MaterialUIの複数のコンポーネントを組み合わせて動作させます。

前回作成したヘッダー部分の左上のメニューボタンをクリックした時にサイドメニューが表示されるようにします。
イメージとしては公式サイトと同じものです。
MaterialUIの公式サイトが公開している情報を徹底的に流用していきます。
複数のコンポーネントを組み合わせることになるので、難易度的には少し上がりますが、これが理解できればかなり自由なデザインが作成できるようになリます。

https://material-ui-next.com/

最終的なフォルダ構成

★が今回の作業対象

ヘッダーにスライドメニューを追加

公式サイト同様に左上のボタンをクリックした場合スライドメニューを表示できるようにします。
DrawersのSwipeable Temporary drawerというコンポーネントを使います。
https://material-ui-next.com/demos/drawers/

変更ファイル

ファイル 変更点
side-menu.js 表示させるサイドメニュー(今回はサンプルを流用)
components/drawers-side-menu.js 新規作成
components/header.js Drawersの機能追加

components/side-menu.js

src配下に作成します。ファイル名、モジュールのパスを一部変更していますが、公式のGitHubにあります。
https://github.com/mui-org/material-ui/blob/v1-beta/docs/src/pages/demos/drawers/tileData.js

components/drawers-side-menu.js

Swipeable Temporary drawerを導入します。
https://material-ui-next.com/demos/drawers/

変更点

  • 公式ではleft,right,top,bottomの4箇所からメニューが表示できますが、left以外不要なので削除しています。
  • 読み込むメニューをside-menu.jsに変更しています。
  • 公式では文字をクリックするのですが、MenuIconをクリックするようにしています。

MenuIconに変更するのはheader.jsのMenuIconと入れ替えるためです。

削除以外の変更点

これでdrawers-side-menu.jsはクリックすると左側からside-menu.jsの内容を表示するメニューボタンをreturnしてくれるようになります。
これをheader.jsの今のボタンを取り替えれば完了です。

components/header.js

変更点

追加
先ほど作成したdrawer-side-menu.jsを読み込みます。

  • import DrawerSideMenu from ‘./drawer-side-menu’;

削除
不要になるMenuIconを削除します。

  • import MenuIcon from ‘material-ui-icons/Menu’;

変更
MenuIconで表示していた部分(IconButtonタグの間)をDrawerSideMenuに置き換えます。

  • MenuIcon → DrawerSideMenu

スクリーンショット

さいごに

これでヘッダーとメニューが作成できました。
次回はカラー変更をやってみます。

React+MaterialUIでWebデザインを初めからStep3

2018.04.10

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です