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

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

Angular Layout Manager の例

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLayoutModule } from "igniteui-angular";
import { LayoutSampleComponent } from "./layout/layout-sample/layout-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LayoutSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxLayoutModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewEncapsulation } from '@angular/core';

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

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

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
 } from "igniteui-angular";
import { LayoutDirectionRowComponent } from "./layout/layout-direction-row/layout-direction-row.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LayoutDirectionRowComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

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

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>
<div *ngIf="layout === 'row'">
    <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>

<div *ngIf="layout === 'row-reverse'">
    <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

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
 } from "igniteui-angular";
import { LayoutDirectionColumnComponent } from "./layout/layout-direction-column/layout-direction-column.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LayoutDirectionColumnComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

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

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>
<div *ngIf="layout === 'column'">
    <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>

<div *ngIf="layout === 'column-reverse'">
    <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

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLayoutModule } from "igniteui-angular";
import { LayoutCustomOrderComponent } from "./layout/layout-custom-order/layout-custom-order.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LayoutCustomOrderComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxLayoutModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

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

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

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
 } from "igniteui-angular";
import { LayoutContentSpaceComponent } from "./layout/layout-content-space/layout-content-space.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LayoutContentSpaceComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

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

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>
<div *ngIf="layout === 'space-between'">
    <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>

<div *ngIf="layout === 'space-around'">
    <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

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
 } from "igniteui-angular";
import { LayoutJustifyContentComponent } from "./layout/layout-justify-content/layout-justify-content.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LayoutJustifyContentComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

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

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>
<div *ngIf="justifyContent === 'start'">
    <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>

<div *ngIf="justifyContent === 'center'">
    <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>

<div *ngIf="justifyContent === 'end'">
    <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

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
 } from "igniteui-angular";
import { LayoutAlignItemsComponent } from "./layout/layout-align-items/layout-align-items.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LayoutAlignItemsComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxLayoutModule,
	IgxButtonGroupModule,
	IgxButtonModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

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

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>
<div *ngIf="alignItems === 'flex-start'">
    <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>

<div *ngIf="alignItems === 'center'">
    <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>

<div *ngIf="alignItems === 'flex-end'">
    <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

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxLayoutModule } from "igniteui-angular";
import { LayoutWrapComponent } from "./layout/layout-wrap/layout-wrap.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	LayoutWrapComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxLayoutModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewEncapsulation } from '@angular/core';

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

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 ディレクティブはそのコンテナーの直下の子のフロー方向に影響します。

ネスト

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

API リファレンス

• IgxLayoutDirective
• IgxFlexDirective