フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【Angular】Flex-Layout, Materialを使ったログイン、テーブル表示サンプル

スポンサーリンク

スポンサーリンク

最近Angularjsにハマってます!!

 

覚えることは多いんだけど、結構楽しくコード書いてます。

 

前回の記事で作成した画面にFlex-Layout、Materialを適用してもう少し綺麗な画面に仕上げます。

 

 

Flex-Layoutとは?

Flexboxでレイアウトを簡単に設定する事ができます。

部品を横並び、縦並びにするのに、CSSを駆使する事なく簡単に設定する事ができます。

詳細は下記のページをご確認ください。

Angular Flex-Layout Demos

 

横並びの例

f:id:ksakae1216:20190219222941p:plain

 

縦並びの例

f:id:ksakae1216:20190219223008p:plain

 

しかもレスポンシブデザインもできる優れもの!!

 

【導入手順】

下記コマンドを実行する

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

 

作成した画面

こんな感じです。

 

ログイン画面 

f:id:ksakae1216:20190219225303p:plain

 

テーブル表示画面

f:id:ksakae1216:20190219225321p:plain

スマホ版ログイン画面

f:id:ksakae1216:20190219225353p:plain

 

スマホ版テーブル表示画面

f:id:ksakae1216:20190219225616p:plain

 

レスポンシブ確認(画面を少し小さくしたテーブル表示画面)

f:id:ksakae1216:20190219225653p:plain

 

最後に

Flex-Layoutを使うと、レスポンシブ対応をわざわざしなくても勝手に対応してくれるので便利ですね。

 

あと、Materialを使うとテーブル表示も簡単です。

 

コードをGitに上げてあります。ご参考までに。

github.com