序章
Flex Layout は、テンプレートで使用できる一連のディレクティブを備えたCSSFlexboxを使用してページレイアウトを作成できるようにするコンポーネントエンジンです。
ライブラリは純粋なTypeScriptで記述されているため、外部のスタイルシートは必要ありません。 また、レスポンシブレイアウトを作成するために、さまざまなブレークポイントでさまざまなディレクティブを指定する方法も提供します。
このチュートリアルでは、サンプルのAngularアプリケーションを作成し、FlexLayoutを使用してアイテムを配置します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- AngularプロジェクトのセットアップおよびAngularコンポーネントの使用にある程度精通していると有益な場合があります。
このチュートリアルは、ノードv14.13.1、npm
v6.14.8、angular
v10.1.6、および@angular/flex-layout
で検証されました。
ステップ1—プロジェクトの設定
@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。
ターミナルウィンドウで、次のコマンドを使用します。
- npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests
これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングが行われず、テストがスキップされる新しいAngularプロジェクトが構成されます。
新しく作成されたプロジェクトディレクトリに移動します。
- cd angular-flex-example
プロジェクトフォルダから、次のコマンドを実行してFlexLayoutをインストールします。
- npm install @angular/flex-layout@10.0.0-beta.32
次に、アプリモジュールにFlexLayoutModule
をインポートします。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FlexLayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
プロジェクトを開始して、エラーがないことを確認します。
- npm start
Webブラウザでローカルアプリ(通常はlocalhost:4200
)にアクセスすると、"angular-flex-example app is running!"
メッセージが表示されます。
このスキャフォールディングを設定すると、テンプレートでFlexLayoutを使用できます。
ステップ2—Flexレイアウトの実験
次に、app.component.html
テンプレートをFlexLayoutModule
を使用するように変更します。
このチュートリアルでFlexLayoutを試した最終結果を示す図は次のとおりです。
まず、コードエディタでapp.component.css
を開き、次のコード行を追加します。
.container {
margin: 10px;
}
.item {
border-radius: .2em;
color: #ffffff;
font-family: sans-serif;
font-size: 2em;
padding: 4em 1em;
text-transform: uppercase;
}
.item-1 {
background-color: #009169;
}
.item-2 {
background-color: #55b296;
}
.item-3 {
background-color: #9fd3c3;
}
.item-4 {
background-color: #e7b013;
}
.item-5 {
background-color: #073443;
}
次に、コードエディタでapp.component.html
を開き、コードを2つのコンテナdiv
と5つの内部アイテムdiv
に置き換えます。
<div class="container">
<div class="item item-1">
Item 1
</div>
<div class="item item-2">
Item 2
</div>
<div class="item item-3">
Item 3
</div>
</div>
<div class="container">
<div class="item item-4">
Item 4
</div>
<div class="item item-5">
Item 5
</div>
</div>
再コンパイル後、Webブラウザでアプリケーションにアクセスします。 これで、5つのdiv
が互いに積み重ねられます。
次に、fxLayout
を追加します。
<div class="container"
fxLayout
>
<div class="item item-1">
Item 1
</div>
<div class="item item-2">
Item 2
</div>
<div class="item item-3">
Item 3
</div>
</div>
<div class="container"
fxLayout
>
<div class="item item-4">
Item 4
</div>
<div class="item item-5">
Item 5
</div>
</div>
このコードは、display: flex
およびflex-direction: row
スタイルをコンテナーdiv
に適用します。
再コンパイル後、Webブラウザーでアプリケーションにアクセスすると、上の行を共有している3つのdiv
と、下の行を共有している2つのdiv
が表示されます。
次に、fxLayoutAlign
とfxLayoutGap
を追加します。
<div class="container"
fxLayout
fxLayoutAlign="center"
fxLayoutGap="10px"
>
<div class="item item-1">
Item 1
</div>
<div class="item item-2">
Item 2
</div>
<div class="item item-3">
Item 3
</div>
</div>
<div class="container"
fxLayout
fxLayoutAlign="center"
fxLayoutGap="10px"
>
<div class="item item-4">
Item 4
</div>
<div class="item item-5">
Item 5
</div>
</div>
このコードは、place-content: stretch center
およびalign-items: stretch
スタイルをコンテナーdiv
に適用します。 また、フレックスアイテム間に10px
のスペースを適用します。
注:バージョン10.0.0-beta.32では、fxLayoutGap
はCSSプロパティgap
を使用する代わりに、CSSプロパティmargin
を使用します。
次に、レスポンシブサフィックスを使用して、特定のブレークポイントでフレックスボックスのスタイルを変更します。
<div class="container"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="item item-1">
Item 1
</div>
<div class="item item-2">
Item 2
</div>
<div class="item item-3">
Item 3
</div>
</div>
<div class="container"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="item item-4">
Item 4
</div>
<div class="item item-5">
Item 5
</div>
</div>
このコードは、xs
(非常に小さい)画面サイズにブレークポイントを設定します。 レイアウトをデフォルトの"row"
から"column"
に変更し、ギャップサイズを"10px"
から"0"
に変更します。
再コンパイル後、Webブラウザでアプリケーションにアクセスします。 ブラウザウィンドウのサイズをxs
ブレークポイント(599px
幅未満)に変更し、スタイルの変化を観察します。
ブレークポイントエイリアスは、さまざまな画面サイズで使用できます。
sm
-小さいmd
-中lg
-大xl
-特大
子要素に追加できるディレクティブもあります。
次に、fxFlex
を追加します。
<div class="container"
fxLayout
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="item item-1"
fxFlex="15%"
>
Item 1
</div>
<div class="item item-2"
fxFlex="20%"
>
Item 2
</div>
<div class="item item-3"
fxFlex
>
Item 3
</div>
</div>
<div class="container"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="item item-4"
fxFlex
>
Item 4
</div>
<div class="item item-5"
fxFlex="200px"
>
Item 5
</div>
</div>
このコードは、flex-grow: 1
、flex-shrink: 1
、およびflex-basis: 100%
を適用します。 幅の値を指定すると、max-width
プロパティが適用されます。
次に、fxFlexOrder
とfxFlexOffset
を追加します。
<div class="container"
fxLayout
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="item item-1"
fxFlex="15%"
>
Item 1
</div>
<div class="item item-2"
fxFlex="20%"
fxFlexOrder="3"
>
Item 2
</div>
<div class="item item-3"
fxFlex
>
Item 3
</div>
</div>
<div class="container"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="item item-4"
fxFlex
fxFlexOffset="50px"
fxFlexOffset.xs="0"
>
Item 4
</div>
<div class="item item-5"
fxFlex="200px"
>
Item 5
</div>
</div>
このコードは、order: 3
を2番目のアイテムに適用します。 4番目のアイテムにもmargin-left: 50px
が適用されます。
再コンパイル後、Webブラウザーでアプリケーションにアクセスすると、2番目の項目が行の3番目の位置にあり、4番目の項目のフレックスボックスの先頭から50px
の間隔があることがわかります。
これで、FlexLayoutの簡単な実験は終わりです。
結論
このチュートリアルでは、AngularアプリケーションでFlexLayoutを使用しました。 これにより、追加のスタイル設定なしで、事前構成されたFlexboxCSSスタイルを使用してレイアウトを構築できました。
使用可能なディレクティブの詳細については、APIの概要を参照してください。
この例では、ディレクティブ値をハードコーディングしました。 データバインディングを使用して、コンポーネントクラス([fxLayout]="direction"
など)の値にバインドすることもできます。 これにより、ユーザーが制御および変更できる非常に動的なレイアウトを作成できます。
Flex Layoutは、マテリアルデザインコンポーネントの AngularMaterialと組み合わせて使用することもできます。