AngularによるWebアプリ開発⑤～Flex-Layoutでレイアウト管理

これまでのあらすじ

今回はAngularのライブラリの1つであるFlex-Layoutを使って、webアプリのレイアウト管理を行う方法について解説していきたいと思います。

【作業環境】

Angular8.0

Flex-Layoutのインストール

まずはflex-layoutのインストールを行います。flex-layoutはAngularのバージョンごとに対応しているバージョンが異なるので、最新以外のAngular上で使用する場合は@を付けてバージョン指定を行う必要があります。

<myapp直下>

# flex-layoutのインストール
$ npm install --save @angular/flex-layout@8.0.0-beta.27

# サンプル用のコンポーネントを追加
$ng generate component flexlauout-sample

インストールが完了したら、app.module.tsにインポートします。

<app.module.ts>

import { FlexLayoutModule } from '@angular/flex-layout';
...

@NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});

<app.routing.module.ts>

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~~
~~~~~
import { FlexlauoutSampleComponent } from "./flexlauout-sample/flexlauout-sample.component"; # これを追加！

const routes: Routes = [
  ~~~~
  { path: "flexlayout-sample", component: FlexlauoutSampleComponent }, # これを追加！
];

~~~~
~~~~

Flex-Layoutによるレイアウト管理

<flexlauout-sample.component.html>

<div class="main" fxLayout="column" fxLayoutGap="10px">
  <div class="header">
    タイトル画像
  </div>
<div class="container" fxLayout="row" fxLayoutGap="10px" fxFlex="grow">
<div class="item1" fxFlex="10%" fxShow fxHide.xs="true">左メニュー</div>
<div class="item2" fxFlex="80%" fxFlex="grow">コンテンツ</div>
<div class="item3" fxFlex="10%" fxShow fxHide.xs="true">右メニュー</div>
</div>
<div class="footer">
フッター
</div>
</div>

fxLayout="column"/fxLayout="row"でレイアウトを設定しています。columnで各要素を縦に重ね、rowだと横に重ねていくイメージです。

fxLayoutGap="10px"は要素の間に10pxの間を取るということを指定しています。

fxFlex="grow"でコンテンツを画面いっぱいに表示するように指定しています。これによってフッターが画面下に固定されたり、サイドメニューが非表示なった際にメインコンテンツが画面いっぱいに表示されます。

fxShow fxHide.xs="true"をタグに入れた要素はブラウザの幅が一定px以下になると要素が非表示になります。今回だと600px以下でサイドメニューが非表示になります。非表示になるpxサイズについてはfxHide.〇〇を変えることで変更可能です。（詳細は最後に紹介するサイトに詳しく記載されているのでそちらを参照）

<flexlauout-sample.component.css>

.header {
  height: 100px;
  border-width: thick;
  border-color: blue;
  border-style: solid;
}

.item1 {
  border-width: thick;
  border-color: #ff0000;
  border-style: solid;
  padding: 5px;

}

.item2 {
  border-width: thick;
  border-color: black;
  border-style: solid;
  padding: 5px;
}

.item3 {
  border-width: thick;
  border-color: green;
  border-style: solid;
  padding: 5px;
}

.footer {
  height: 100px;
  border-width: thick;
  border-color: yellow;
  border-style: solid;
}

.main {
  min-height: 100vh;
}

http://localhost:4200/flexlayout-sampleにアクセスすると以下のようになっています。