Angular公式のドキュメントページをマネしようとしてちょっと苦戦したので、その備忘録です。

開発環境
  • OS:Windows10 Pro
  • Node.js:v12.16.3
  • npm:6.14.4
  • Angular CLI:9.1.4
  • Angular Material:9.2.4
  • Angular Flex-Layout:9.0.0-beta.31

『Angular Material』とは

Angularの開発元であるGoogleがAngular公式コンポーネントとして開発しているパッケージです。

よりリッチなUIを作成する為の部品を様々提供してくれる便利な奴です。

今回はAngular Materialの「Toolbar」と「Sidenav」というコンポーネントを使って、Angular公式ドキュメントページのようなUIを実装しようと試みました。

Angular Materialのインストールに関しては下記記事をご参考ください。

『Angular Flex-Layout』とは

Angular開発の際にデザインの実装を助けてくれる、CSSの拡張みたいなパッケージです。

レスポンシブにも対応しており、従来よりも少ないコードでの実装が可能です。

Angular Flex-Layoutのインストールに関しては下記記事をご参考ください。

ToolbarとSidenavの実装

まずは一番最初に行った実装から。

今回もプロジェクト作成と同時に作成される、AppComponetを使っていきます。

app.module.ts

まずは下記の通りコンポーネントのモジュールをインポートします。

ToolbarとSidenavの他に、ButtonとIconとListというモジュールも追加していることにご注意ください。

ButtonとIconはツールバー上のサイドナビゲーション開閉用ボタンに、Listはナビゲーションアイテムを表示するために使用します。

app.component.html

表示結果

無事、動作を確認できた、と思いきや赤矢印の箇所にご注目ください。

コンテンツ部分には何も表示していないにもかかわらず、スクロールバーが出現しています。

これ、ちょっと気持ち悪いですよね。

余白の原因

色々触ってみた感じ、コンテンツ部分に設定している「fxFlexFill」はその役割を果たしているのですが、Toolbarを考慮せずに画面いっぱいまで広がっている模様。

解決策

以下のページが参考になりました。

app.component.html(修正後)

Sidenavをdivタグで囲み、高さを指定しました。

表示結果(修正後)

今度こそ、想定通りの表示結果を得られました。

さらに考慮すべき点

しかしこれでオールオッケー!というコトではなく、もう一つ考慮すべき点があります。

それが、レスポンシブ対応。

上記はChromeの開発者ツールを使って、スマホでの表示を行ったものです。

赤丸の点に注目して頂くと、少しサイドナビゲーションの境界線が切れているのが分かるかと思います。

修正版HTMLでハードコーディングした64ピクセルはブラウザ表示時のツールバーの大きさなので、スマホに対応する場合はスマホ表示時のツールバーの大きさを指定する必要があります。

せっかくなのでついでに試してみましょう。

app.component.scss(レスポンシブ版)

レスポンシブ対応にあたって、SCSSへの記載を追加していきます。

Flex-Layoutでも出来るのかもしれませんが、ちょっと調べた感じだと今回は対応できなさそうだったので…。

一つのファイルでレスポンシブ対応が出来る書き方を採用しています。便利ですね。

コチラのレスポンシブ対応方法に関しては以下のサイトを参考にさせて頂きました。

app.component.html(レスポンシブ版)

ハードコーディングをしていた箇所にスタイルを充てただけです。

表示結果(レスポンシブ版)

PC版

モバイル版

iPhone

Android(Galaxy)

タブレット(iPad)

ちょっと見えにくいかもしれませんが、デバイスによらず想定通りの表示となっています。

最後に

ちょっと長くなってしまいましたが、Angular MaterialのToolbarとSidenavを併用する際には、Sidenavの高さに注意が必要です。

Sidenavの高さを計算するには、Toolbarの高さを実装者が意識する必要があります。

指定の仕方もちょっと原始的なので、もうちょっとうまい方法が見つかったらまた書きます。

以上です。

スポンサーリンク