Angular 레이아웃 관리자 지침 개요

Ignite UI for Angular 하면 개발자가 적용되는 컨테이너의 모든 자식에 대한 레이아웃 방향을 지정할 수 있습니다. 레이아웃은 수직 또는 수평으로 흐를 수 있으며 래핑, 정렬 및 정렬을 위한 컨트롤이 있습니다.

Angular 레이아웃 관리자 예제

EXAMPLE

TS

HTML

SCSS

import { Component, ViewEncapsulation } from '@angular/core';
import { IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-layout-sample',
    styleUrls: ['./layout-sample.component.scss'],
    templateUrl: './layout-sample.component.html',
    imports: [IgxLayoutDirective, IgxFlexDirective]
})

export class LayoutSampleComponent { }
tsコピー

<div igxLayout>
    <div class="layout-box sidebar" igxLayout igxLayoutDir="column">
        <div class="layout-box__el" igxFlex>Sidebar</div>
    </div>

    <div class="layout-box content" igxLayout igxLayoutDir="column">
        <div class="layout-box__el header" igxFlex>Header</div>
        <div class="layout-box__el body" igxFlex>
            <div class="layout-box" igxLayout>
                <div class="layout-box__el" igxFlex>1</div>
                <div class="layout-box__el" igxFlex>2</div>
                <div class="layout-box__el" igxFlex>3</div>
            </div>
        </div>
        <div class="layout-box__el footer" igxFlex>Footer</div>
    </div>
</div>
htmlコピー

@use '../../../variables' as *;

.layout-box {
    width: 100%;
    background: color($color: 'gray', $variant: 200);
    padding: 8px;

    .layout-box__el {
        padding: 10px 20px;
        margin: 8px;
        background: color($color: 'secondary');
        color: color($color: 'surface');
    }

    &.sidebar {
        flex: 1;
    }

    &.content {
        flex: 3;

        .layout-box {
            height: 400px;
        }

        .body {
            background: none;
            padding: 0;
        }
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

용법

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

행 방향으로 가로로

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

EXAMPLE

TS

HTML

SCSS

import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';


@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-layout-direction-row',
    styleUrls: ['./layout-direction-row.component.scss'],
    templateUrl: './layout-direction-row.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective]
})

export class LayoutDirectionRowComponent {
    public alignment = ButtonGroupAlignment.horizontal;
    public rippleColor = 'grey';
    public layout = 'row';
}
tsコピー

<igx-buttongroup [alignment]="alignment">
  <button igxButton (click) = "layout = 'row'" [igxRipple]="rippleColor" [selected]="true">Row</button>
  <button igxButton (click) = "layout = 'row-reverse'" [igxRipple]="rippleColor">Row reverse</button>
</igx-buttongroup>
@if (layout === 'row') {
  <div>
    <div class="layout-box" igxLayout igxLayoutDir="row">
      <div class="layout-box__el" igxFlex>1</div>
      <div class="layout-box__el" igxFlex>2</div>
      <div class="layout-box__el" igxFlex>3</div>
    </div>
  </div>
}

@if (layout === 'row-reverse') {
  <div>
    <div class="layout-box" igxLayout igxLayoutDir="row" [igxLayoutReverse]="true">
      <div class="layout-box__el" igxFlex>1</div>
      <div class="layout-box__el" igxFlex>2</div>
      <div class="layout-box__el" igxFlex>3</div>
    </div>
  </div>
}
htmlコピー

@use '../../../variables' as *;

igx-buttongroup {
    display: block;
    margin: 24px 4px;
}

.layout-box {
    width: 100%;
    background: color($color: 'gray', $variant: 200);
    padding: 8px;
    border-radius: 6px;
}

.layout-box__el {
    height: 48px;
    padding: 10px 20px;
    margin: 8px;
    background: color($color: 'secondary');
    color: color($color: 'surface');
}
scssコピー

Edit in: CodesandboxStackBlitz

열 방향으로 수직으로

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

EXAMPLE

TS

HTML

SCSS

import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';


@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-layout-direction-column',
    styleUrls: ['./layout-direction-column.component.scss'],
    templateUrl: './layout-direction-column.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective]
})

export class LayoutDirectionColumnComponent {
    public alignment = ButtonGroupAlignment.horizontal;
    public rippleColor = 'grey';
    public layout = 'column';
}
tsコピー

<igx-buttongroup [alignment]="alignment">
  <button igxButton (click) = "layout = 'column'" [igxRipple]="rippleColor" [selected]="true">Column</button>
  <button igxButton (click) = "layout = 'column-reverse'" [igxRipple]="rippleColor">Column reverse</button>
</igx-buttongroup>
@if (layout === 'column') {
  <div>
    <div class="layout-box" igxLayout igxLayoutDir="column">
      <div class="layout-box__el" igxFlex>1</div>
      <div class="layout-box__el" igxFlex>2</div>
      <div class="layout-box__el" igxFlex>3</div>
    </div>
  </div>
}

@if (layout === 'column-reverse') {
  <div>
    <div class="layout-box" igxLayout igxLayoutDir="column" [igxLayoutReverse]="true">
      <div class="layout-box__el" igxFlex>1</div>
      <div class="layout-box__el" igxFlex>2</div>
      <div class="layout-box__el" igxFlex>3</div>
    </div>
  </div>
}
htmlコピー

@use '../../../variables' as *;

igx-buttongroup {
    display: block;
    margin: 24px 4px;
}

.layout-box {
    width: 100%;
    background: color($color: 'gray', $variant: 200);
    padding: 8px;
    border-radius: 6px;
}

.layout-box__el {
    height: 48px;
    padding: 10px 20px;
    margin: 8px;
    background: color($color: 'secondary');
    color: color($color: 'surface');
}
scssコピー

Edit in: CodesandboxStackBlitz

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

요소 순서 사용자 정의

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

EXAMPLE

TS

HTML

SCSS

import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-layout-custom-order',
    styleUrls: ['./layout-custom-order.component.scss'],
    templateUrl: './layout-custom-order.component.html',
    imports: [IgxLayoutDirective, IgxFlexDirective]
})

export class LayoutCustomOrderComponent {
}
tsコピー

<div class="layout-box" igxLayout igxLayoutDir="row">
    <div class="layout-box__el" igxFlex [igxFlexOrder]="1">1</div>
    <div class="layout-box__el" igxFlex [igxFlexOrder]="0">2</div>
    <div class="layout-box__el" igxFlex [igxFlexOrder]="2">3</div>
</div>
htmlコピー

@use '../../../variables' as *;

igx-buttongroup {
    display: block;
    margin: 24px 4px;
}

.layout-box {
    width: 100%;
    background: color($color: 'gray', $variant: 200);
    padding: 8px;
    border-radius: 6px;
    margin-top: 24px;
}

.layout-box__el {
    height: 48px;
    padding: 10px 20px;
    margin: 8px;
    background: color($color: 'secondary');
    color: color($color: 'surface');
}
scssコピー

Edit in: CodesandboxStackBlitz

요소 간격 변경

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

EXAMPLE

TS

HTML

SCSS

import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective } from 'igniteui-angular';


@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-layout-content-space',
    styleUrls: ['./layout-content-space.component.scss'],
    templateUrl: './layout-content-space.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective]
})

export class LayoutContentSpaceComponent {
    public alignment = ButtonGroupAlignment.horizontal;
    public rippleColor = 'grey';
    public layout = 'space-between';
}
tsコピー

<igx-buttongroup [alignment]="alignment">
  <button igxButton (click) = "layout = 'space-between'" [igxRipple]="rippleColor" [selected]="true">Space Between</button>
  <button igxButton (click) = "layout = 'space-around'" [igxRipple]="rippleColor">Space Around</button>
</igx-buttongroup>
@if (layout === 'space-between') {
  <div>
    <div class="layout-box" igxLayout igxLayoutJustify="space-between">
      <div class="layout-box__el">1</div>
      <div class="layout-box__el">2</div>
      <div class="layout-box__el">3</div>
    </div>
  </div>
}

@if (layout === 'space-around') {
  <div>
    <div class="layout-box" igxLayout igxLayoutJustify="space-around">
      <div class="layout-box__el">1</div>
      <div class="layout-box__el">2</div>
      <div class="layout-box__el">3</div>
    </div>
  </div>
}
htmlコピー

@use '../../../variables' as *;

igx-buttongroup {
    display: block;
    margin: 24px 4px;
}

.layout-box {
    width: 100%;
    background: color($color: 'gray', $variant: 200);
    padding: 8px;
    border-radius: 6px;
}

.layout-box__el {
    height: 48px;
    padding: 10px 20px;
    margin: 8px;
    background: color($color: 'secondary');
    color: color($color: 'surface');
}
scssコピー

Edit in: CodesandboxStackBlitz

주축을 따라 요소 배치

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

EXAMPLE

TS

HTML

SCSS

import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective } from 'igniteui-angular';


@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-layout-justify-content',
    styleUrls: ['./layout-justify-content.component.scss'],
    templateUrl: './layout-justify-content.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective]
})

export class LayoutJustifyContentComponent {
    public alignment = ButtonGroupAlignment.horizontal;
    public rippleColor = 'grey';
    public justifyContent = 'start';
}
tsコピー

<igx-buttongroup [alignment]="alignment">
  <button igxButton (click) = "justifyContent = 'start'" [igxRipple]="rippleColor" [selected]="true">Flex Start</button>
  <button igxButton (click) = "justifyContent = 'center'" [igxRipple]="rippleColor">Center</button>
  <button igxButton (click) = "justifyContent = 'end'" [igxRipple]="rippleColor">Flex End</button>
</igx-buttongroup>
@if (justifyContent === 'start') {
  <div>
    <div class="layout-box" igxLayout igxLayoutJustify="flex-start">
      <div class="layout-box__el">1</div>
      <div class="layout-box__el">2</div>
      <div class="layout-box__el">3</div>
    </div>
  </div>
}

@if (justifyContent === 'center') {
  <div>
    <div class="layout-box" igxLayout igxLayoutJustify="center">
      <div class="layout-box__el">1</div>
      <div class="layout-box__el">2</div>
      <div class="layout-box__el">3</div>
    </div>
  </div>
}

@if (justifyContent === 'end') {
  <div>
    <div class="layout-box" igxLayout igxLayoutJustify="flex-end">
      <div class="layout-box__el">1</div>
      <div class="layout-box__el">2</div>
      <div class="layout-box__el">3</div>
    </div>
  </div>
}
htmlコピー

@use '../../../variables' as *;

igx-buttongroup {
    display: block;
    margin: 24px 4px;
}

.layout-box {
    width: 100%;
    background: color($color: 'gray', $variant: 200);
    padding: 8px;
    border-radius: 6px;
}

.layout-box__el {
    height: 48px;
    padding: 10px 20px;
    margin: 8px;
    background: color($color: 'secondary');
    color: color($color: 'surface');
}
scssコピー

Edit in: CodesandboxStackBlitz

교차축을 따라 요소 배치

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

EXAMPLE

TS

HTML

SCSS

import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';


@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-layout-align-items',
    styleUrls: ['./layout-align-items.component.scss'],
    templateUrl: './layout-align-items.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective]
})

export class LayoutAlignItemsComponent {
    public alignment = ButtonGroupAlignment.horizontal;
    public rippleColor = 'grey';
    public alignItems = 'flex-start';
}
tsコピー

<igx-buttongroup [alignment]="alignment">
  <button igxButton (click) = "alignItems = 'flex-start'" [igxRipple]="rippleColor" [selected]="true">Flex Start</button>
  <button igxButton (click) = "alignItems = 'center'" [igxRipple]="rippleColor">Center</button>
  <button igxButton (click) = "alignItems = 'flex-end'" [igxRipple]="rippleColor">Flex End</button>
</igx-buttongroup>
@if (alignItems === 'flex-start') {
  <div>
    <div class="layout-box tall" igxLayout igxLayoutItemAlign="flex-start">
      <div class="layout-box__el" igxFlex>1</div>
      <div class="layout-box__el" igxFlex>2</div>
      <div class="layout-box__el" igxFlex>3</div>
    </div>
  </div>
}

@if (alignItems === 'center') {
  <div>
    <div class="layout-box tall" igxLayout igxLayoutItemAlign="center">
      <div class="layout-box__el" igxFlex>1</div>
      <div class="layout-box__el" igxFlex>2</div>
      <div class="layout-box__el" igxFlex>3</div>
    </div>
  </div>
}

@if (alignItems === 'flex-end') {
  <div>
    <div class="layout-box tall" igxLayout igxLayoutItemAlign="flex-end">
      <div class="layout-box__el" igxFlex>1</div>
      <div class="layout-box__el" igxFlex>2</div>
      <div class="layout-box__el" igxFlex>3</div>
    </div>
  </div>
}
htmlコピー

@use '../../../variables' as *;

igx-buttongroup {
    display: block;
    margin: 24px 4px;
}

.layout-box {
    width: 100%;
    background: color($color: 'gray', $variant: 200);
    padding: 8px;
    border-radius: 6px;

    &.tall {
        height: 300px;
    }
}

.layout-box__el {
    height: 48px;
    padding: 10px 20px;
    margin: 8px;
    background: color($color: 'secondary');
    color: color($color: 'surface');
}
scssコピー

Edit in: CodesandboxStackBlitz

요소를 래핑할 수도 있습니다.

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

EXAMPLE

TS

HTML

SCSS

import { Component, ViewEncapsulation } from '@angular/core';
import { IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-layout-wrap',
    styleUrls: ['./layout-wrap.component.scss'],
    templateUrl: './layout-wrap.component.html',
    imports: [IgxLayoutDirective, IgxFlexDirective]
})

export class LayoutWrapComponent {
}
tsコピー

<div class="layout-box" igxLayout igxLayoutDir="row" igxLayoutWrap="wrap">
    <div class="layout-box__el wrap-row" igxFlex [igxFlexGrow]="0">1</div>
    <div class="layout-box__el wrap-row" igxFlex [igxFlexGrow]="0">2</div>
    <div class="layout-box__el wrap-row" igxFlex [igxFlexGrow]="0">3</div>
</div>
htmlコピー

@use '../../../variables' as *;

.wrap-row {
    width: calc(50% - 16px);
}

.layout-box {
    width: 100%;
    background: color($color: 'gray', $variant: 200);
    padding: 8px;
    border-radius: 6px;
    margin-top: 24px;
}

.layout-box__el {
    height: 48px;
    padding: 10px 20px;
    margin: 8px;
    background: color($color: 'secondary');
    color: color($color: 'surface');
}
scssコピー

Edit in: CodesandboxStackBlitz

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

중첩

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

API 참조

• IgxLayout 지시어
• IgxFlex 지시어