Descripción general de las directivas del administrador de diseño Angular
Las directivas de diseño Ignite UI for Angular permiten a los desarrolladores especificar una dirección de diseño para cualquier elemento secundario del contenedor al que se aplica. El diseño puede fluir vertical u horizontalmente, con controles para el ajuste, la justificación y la alineación.
Ejemplo de Angular Layout Manager
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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Utilice la directiva igxLayout en un elemento contenedor para especificar la dirección del diseño para sus hijos:
Horizontalmente con dirección de fila
Utilice igxLayoutDir
="row"
.
import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';
import { NgIf } from '@angular/common';
@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, NgIf, 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>
<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
Verticalmente con dirección de columna
Utilice igxLayoutDir
="column"
.
import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';
import { NgIf } from '@angular/common';
@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, NgIf, 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>
<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
Orden inverso usando igxLayoutReverse
="true"
.
Personaliza el orden de los elementos.
Personaliza el orden del elemento usando igxFlexOrder
.
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
Cambiar el espaciado de los elementos
Utilice igxLayoutJustify
="space-between | space-around"
.
import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective } from 'igniteui-angular';
import { NgIf } from '@angular/common';
@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, NgIf, 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>
<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
Colocar elementos a lo largo del eje principal.
Utilice igxLayoutJustify
="flex-start | center | flex-end"
para especificar la posición de los elementos a lo largo del eje principal según sus preferencias.
import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective } from 'igniteui-angular';
import { NgIf } from '@angular/common';
@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, NgIf, 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>
<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
Colocar elementos a lo largo del eje transversal.
Utilice igxLayoutItemAlign
="flex-start | center | flex-end"
para especificar la posición de los elementos a lo largo del eje transversal según sus preferencias.
import { Component, ViewEncapsulation } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular';
import { NgIf } from '@angular/common';
@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, NgIf, 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>
<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
También puedes envolver elementos.
Utilice igxLayoutWrap
="wrap"
.
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
La directiva igxLayout
afecta las direcciones de flujo para los hijos inmediatos de ese contenedor.
Anidación
Utilice la directiva igxFlex
para elementos dentro de un padre igxLayout
para controlar propiedades específicas de flexbox.