Angular Layout Manager (レイアウト マネジャー) ディレクティブの概要
The Ignite UI for Angular Layout Directives allow developers to specify a layout direction for any children of the container it is applied to. Layout can flow vertically or horizontally, with controls for wrapping, justification, and alignment.
Angular Layout Manager の例
使用方法
コンテナー要素で **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 親内の要素に使用して、特定のフレックスボックス プロパティを制御します。