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

    EXAMPLE
    TS
    HTML
    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".

    EXAMPLE
    TS
    HTML
    SCSS

    Verticalmente con dirección de columna

    Utilice igxLayoutDir​ ​="column".

    EXAMPLE
    TS
    HTML
    SCSS

    Orden inverso usando igxLayoutReverse​ ​="true".

    Personaliza el orden de los elementos.

    Personaliza el orden del elemento usando igxFlexOrder.

    EXAMPLE
    TS
    HTML
    SCSS

    Cambiar el espaciado de los elementos

    Utilice igxLayoutJustify​ ​="space-between | space-around".

    EXAMPLE
    TS
    HTML
    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.

    EXAMPLE
    TS
    HTML
    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.

    EXAMPLE
    TS
    HTML
    SCSS

    También puedes envolver elementos.

    Utilice igxLayoutWrap​ ​="wrap".

    EXAMPLE
    TS
    HTML
    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.

    Referencias de API