Layout Manager
Ignite UI for Angular Layout ディレクティブは、適用されたコンテナーの子要素のレイアウト方向を指定する機能を提供します。レイアウトを垂直方向または水平方向に設定や折り返し、両端揃え、配置の制御も可能です。
Angular Layout Manager の例
このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
コンテナ要素で igxLayout ディレクティブを使用して、子要素のレイアウト方向を指定します。
水平方向
igxLayoutDir="row" を使用します。
垂直方向
igxLayoutDir="column" を使用します。
注: 順序を反転するには、igxLayoutReverse="true" を使用します。
要素の順序をカスタマイズ
igxFlexOrder を使用して要素の順序をカスタマイズします。
要素の間隔を変更
igxLayoutJustify="space-between | space-around" を使用して、要素の間隔を変更します。
要素を主軸に沿って配置
igxLayoutJustify="flex-start | center | flex-end" を使用して、要素を主軸に沿って配置します。
要素を交差軸に沿って配置
igxLayoutItemAlign="flex-start | center | flex-end" を使用して、要素を交差軸に沿って配置します。
要素をラップ
igxLayoutWrap="wrap" を使用して要素をラップすることもできます。
注: igxLayout ディレクティブはそのコンテナーの直下の子のフロー方向に影響します。
ネスト
igxFlex ディレクティブを igxLayout 親内の要素に使用して、特定のフレックスボックス プロパティを制御します。
