Angular 레이아웃 관리자 지시문 개요

    Ignite UI for Angular 하면 개발자는 이 지시문이 적용되는 컨테이너의 하위 항목에 대한 레이아웃 방향을 지정할 수 있습니다. 레이아웃은 줄 바꿈, 자리맞추기, 정렬을 제어하여 수직 또는 수평으로 흐를 수 있습니다.

    Angular Layout Manager Example

    Usage

    컨테이너 요소에 igxLayout 지시문을 사용하여 해당 하위 항목의 레이아웃 방향을 지정합니다.

    Horizontally with Row direction

    ​igxLayoutDir="row" 사용하세요.

    Vertically with Column direction

    ​igxLayoutDir="column" 사용하세요.

    Note

    ​igxLayoutReverse="true" 사용하여 역순으로 수행합니다.

    Customize the order of the elements

    ​igxFlexOrder 사용하여 요소의 순서를 맞춤설정하세요.

    Change element spacing

    ​igxLayoutJustify="space-between | space-around" 사용하세요.

    Position elements along the main axis

    ​igxLayoutJustify="flex-start | center | flex-end" 사용하여 기본 설정에 따라 주축을 따라 요소 위치를 지정하세요.

    Position elements along the cross axis

    ​igxLayoutItemAlign="flex-start | center | flex-end" 사용하여 기본 설정에 따라 교차축을 따라 요소 위치를 지정합니다.

    You can also wrap elements

    ​igxLayoutWrap="wrap" 사용하세요.

    Note

    ​igxLayout 지시문은 해당 컨테이너의 직계 하위 항목에 대한 흐름 방향에 영향을 미칩니다.

    Nesting

    특정 igxLayout 속성을 제어하려면 igxLayout 상위 요소 내부의 요소에 대해 igxFlex 지시어를 사용하세요.

    API References