Visão geral das diretivas do Angular Layout Manager

    As diretivas de layout do Ignite UI for Angular permitem que os desenvolvedores especifiquem uma direção de layout para quaisquer filhos do contêiner ao qual ele é aplicado. O layout pode fluir vertical ou horizontalmente, com controles para quebra, justificação e alinhamento.

    Exemplo do Angular Gerenciador de Layout

    Uso

    Use a diretiva igxLayout em um elemento de contêiner para especificar a direção do layout para seus filhos:

    Horizontalmente com direção de linha

    Use igxLayoutDir="row".

    Verticalmente com direção da coluna

    Use igxLayoutDir="column".

    Observação

    Ordem reversa usando igxLayoutReverse="true".

    Personalize a ordem dos elementos

    Personalize a ordem do elemento usando igxFlexOrder.

    Alterar espaçamento do elemento

    Use igxLayoutJustify="space-between | space-around".

    Posicione os elementos ao longo do eixo principal

    Use igxLayoutJustify="flex-start | center | flex-end" para especificar a posição dos elementos ao longo do eixo principal de acordo com suas preferências.

    Posicionar elementos ao longo do eixo transversal

    Use igxLayoutItemAlign="flex-start | center | flex-end" para especificar a posição dos elementos ao longo do eixo transversal de acordo com suas preferências.

    Você também pode quebrar elementos

    Use igxLayoutWrap="wrap".

    Observação

    A diretiva igxLayout afeta as direções de fluxo para os filhos imediatos desse contêiner.

    Nidificação

    Use a diretiva igxFlex para elementos dentro de um pai igxLayout para controlar propriedades específicas do flexbox.

    Referências de API