Angular Layout Manager (レイアウト マネジャー) ディレクティブの概要

    Ignite UI for Angular Layout Manager ディレクティブは、適用されたコンテナーの子要素のレイアウト方向を指定する機能を提供します。レイアウトを垂直方向または水平方向に設定や折り返し、両端揃え、配置の制御も可能です。

    Angular Layout Manager の例

    使用方法

    コンテナー要素で igxLayout ディレクティブを使用して、子要素のレイアウト方向を指定します。

    水平方向

    igxLayoutDir="row" を使用します。

    垂直方向

    igxLayoutDir="column" を使用します。

    Note

    順序を反転するには、igxLayoutReverse="true" を使用します。

    要素の順序をカスタマイズ

    igxFlexOrder を使用して要素の順序をカスタマイズします。

    要素の間隔を変更

    igxLayoutJustify="space-between | space-around" を使用して、要素の間隔を変更します。

    要素を主軸に沿って配置

    igxLayoutJustify="flex-start | center | flex-end" を使用して、要素を主軸に沿って配置します。

    要素を交差軸に沿って配置

    igxLayoutItemAlign="flex-start | center | flex-end" を使用して、要素を交差軸に沿って配置します。

    要素をラップ

    igxLayoutWrap="wrap" を使用して要素をラップすることもできます。

    Note

    igxLayout ディレクティブはそのコンテナーの直下の子のフロー方向に影響します。

    ネスト

    igxFlex ディレクティブを igxLayout 親内の要素に使用して、特定のフレックスボックス プロパティを制御します。

    API リファレンス