Descripción general de las directivas Angular Layout Manager
La Ignite UI for Angular permite 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 ajuste, justificación y alineación.
Ejemplo de Angular Layout Manager
Uso
Utilice la directiva igxLayout en un elemento contenedor para especificar la dirección del diseño para sus hijos:
Horizontalmente con la dirección de la fila
Utilice igxLayoutDir
="row"
.
Verticalmente con dirección de columna
Utilice igxLayoutDir
="column"
.
Nota
Orden inverso usando igxLayoutReverse
="true"
.
Personaliza el orden de los elementos
Personaliza el orden del elemento usando igxFlexOrder
.
Cambiar el espaciado de los elementos
Utilice igxLayoutJustify
="space-between | space-around"
.
Posición de los 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.
Posición de los 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.
También puede ajustar elementos
Utilice igxLayoutWrap
="wrap"
.
Nota
La directiva igxLayout
afecta las direcciones de flujo para los hijos inmediatos de ese contenedor.
Nidificación
Utilice la directiva igxFlex
para elementos dentro de un padre igxLayout
para controlar propiedades específicas de flexbox.