チュートリアル)Material-UI★前回の記事yucatio.hatenablog.comAppbarはいわゆるwebページのヘッダーで、ロゴやメニューなどを表示するのに使用します。今回はログイン機能とナビゲーション機能をAppbarに載せます。ディレクトリ階層の変更とファイル名の変更も行います。変更前と変更後のコンポーネントの位置関係は以下のようになります。ディレクトリ階層の変更Appbarのコンポーネントをheaderディレクトリにまとめます。src/components/headerディレクトリを作成します。src/components/login/index.jsをsrc/components/header/Login.jsにリネームします。src/components/navbar/index.jsをsrc/components/header/MenuIcons.jsにリネームします。src/components/header/MenuIcons.jsのNavbar変数をMenuIcons変数にリネームします。変更headerにAppbarとToolbarを使用するAppbarを作成していきます。HeaderheaderコンポーネントをAppコンポーネントに追加します。変更Headerの下に、classes.toolbarを適用した<div>を追加します(#1)。Appbarはフローティングしているので、下のメニューを、toolbarの高さぶん下にする必要があるため、この要素を追加しています。試しにこのdiv要素を外してみると、最近の更新とAppbarが重なってしまうことがわかります。ここまでの実行結果です。スクロールしてもAppbarが上部に表示されます。Appbarとブラウザの端の間に空白が開いてしまう場合は、<CssBaseline>の設定が足りていないので、下記記事を参考に設定してください。左側にタイトルを表示してHomeへのリンクを作成します。右側にタスク一覧へのリンクとログイン機能を配置します。withStyles(styles)(Header)タスク編集へのリンクはIconButtonを使用します。Tooltipを使用して、ボタンにマウスカーソルが重なると"編集"というテキストが現れるようにします。mapStateToProps)(MenuIcons)実行結果です。Appbarの左側にタイトル、右側に編集へのリンクとログイン表示がされました。リンクが機能していることを確認してください。以上でログイン機能とナビゲーション機能をMaterial-UIのAppBarに載せることができました。「ピーターからの問題」1から9までを使って分数の穴埋め算。(1)はてなブログをはじめよう!yucatioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。