最近Angularjsにハマってます！！
覚えることは多いんだけど、結構楽しくコード書いてます。
前回の記事で作成した画面にFlex-Layout、Materialを適用してもう少し綺麗な画面に仕上げます。
Flex-Layoutとは？
Flexboxでレイアウトを簡単に設定する事ができます。
部品を横並び、縦並びにするのに、CSSを駆使する事なく簡単に設定する事ができます。
詳細は下記のページをご確認ください。
横並びの例
縦並びの例
しかもレスポンシブデザインもできる優れもの！！
【導入手順】
下記コマンドを実行する
npm i -s @angular/flex-layout @angular/cdk
Materialとは？
マテリアルデザインを実現するコンポーネント集です。
今回はテーブル表示で使ってます。
【導入手順】
下記コマンドを実行する
npm install –save @angular/material @angular/cdk @angular/animations
npm install –save angular/material2-builds angular/cdk-builds angular/animations-builds
ng add @angular/material
作成した画面
こんな感じです。
ログイン画面
テーブル表示画面
スマホ版ログイン画面
スマホ版テーブル表示画面
レスポンシブ確認（画面を少し小さくしたテーブル表示画面)
最後に
Flex-Layoutを使うと、レスポンシブ対応をわざわざしなくても勝手に対応してくれるので便利ですね。
あと、Materialを使うとテーブル表示も簡単です。
コードをGitに上げてあります。ご参考までに。
コメント