Como usar layouts do Flexbox no Construtor de IU

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 5 min. de leitura

    • Crie um layout Flexbox em Construtor de IU para criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho.

    Você pode criar facilmente páginas personalizadas com layouts Flexbox em Construtor de IU. Personalizar o layout da sua página permite que você aproveite ao máximo o Flexbox para que você possa alcançar o design geral da sua página. Para obter mais informações, consulte Organizar componentes nas páginas do Construtor de IU.

    Flexbox é um sistema de layout unidimensional em CSS. O Flexbox é inerentemente flexível, o que é útil quando você não sabe o tamanho do seu conteúdo. Se você planeja criar páginas complexas, pode personalizar o layout da página na guia de estilos do painel de configuração ou com CSS. Visite a Mozilla para saber mais sobre o Flexbox.

    Você pode mudar a direção do seu conteúdo no layout das seguintes maneiras:
    • Linha: as linhas são organizadas da esquerda para a direita ou da direita para a esquerda, dependendo da direção do idioma padrão do seu navegador. Esquerda/direita é o caso de um navegador em inglês.
    • Linha reversa: as linhas são organizadas na direção inversa do idioma padrão do seu navegador, como da direita para a esquerda ou da esquerda para a direita.
    • Coluna: Para cima/para baixo ou para baixo/para cima
    • Inversão de coluna: para baixo/para cima
      Figura 1. Direções de linha e coluna do Flexbox
      Diagrama mostrando as direções da linha e da coluna do Flexbox.
    • Justificar conteúdo: define o alinhamento ao longo do eixo principal. Estas são as opções:
      • Início flexível: os itens estão no início da direção flexível, semelhante ao conteúdo justificado à esquerda. Esta é a configuração padrão.
      • Flex-end: os itens estão no final da direção flexível, semelhante ao conteúdo justificado à direita.
      • Espaço entre: os itens são distribuídos uniformemente.
      • Espaço ao redor: os itens são distribuídos uniformemente com igual espaço ao redor deles.
      • Espaçamento uniforme: o espaçamento entre os itens é igual a.
    • Alinhar itens: define como você deseja que o conteúdo flexível seja exibido ao longo do eixo cruzado. Estas são as opções:
      • Esticar: estique seu conteúdo para preencher o contêiner. Esta é a configuração padrão
      • Flex-start: coloque seu conteúdo no início do eixo cruzado.
      • Flex-end: coloque seu conteúdo no final do eixo cruzado.
      • Centralizar: centraliza o conteúdo no eixo cruzado.
      • Sistema de base: alinhe o conteúdo igual ao alinhamento da linha de base .
    • Altura: defina a altura automaticamente ou manualmente.
    • Largura: defina a altura dos itens do seu Flexbox automaticamente ou manualmente.
    • Margem: defina a distância mínima entre os itens do Flexbox.
    • Preenchimento: defina o preenchimento para cada lado dos itens do Flexbox.

    Criar um layout Flexbox com o novo sistema de layout

    Crie um layout Flexbox em Construtor de IU para criar páginas poderosas em um ambiente de baixo código.

    Antes de Iniciar

    Função necessária: administrador

    Procedimento

    1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
    3. Criar uma página no Construtor de IU.
    4. Selecione o ícone + na fase Construtor de IU.
    5. Selecione Flexbox na guia de layouts.
      Seta apontando para a opção Flexbox na guia de layouts da caixa de ferramentas.
    6. Selecione a guia Estilos no painel de configuração.
    7. Na seção Layout, você verá o Flexbox realçado.
      Seta apontando para a opção Flexbox na guia de estilos do painel de configuração.
    8. Na seção Layout da guia de estilos, você pode mudar o seguinte:
      Direção
      Defina como você deseja que os componentes sejam empilhados, horizontalmente ou verticalmente.
      Alinhar Itens
      Defina como os componentes nos contêineres se alinham como um grupo.
      Justificar conteúdo
      Defina como compactar ou separar os componentes no contêiner.
      Nota:
      Selecione Mostrar opções de layout avançadas para ver as próximas duas opções.
      Lacuna
      Defina o tamanho da lacuna entre linhas e colunas.
      Quebrar elementos secundários em várias linhas
      Defina se os componentes são forçados em uma linha ou estouram em várias linhas.

      Visite a Mozilla para saber mais sobre as configurações de layout do Flexbox.

    9. Opcional: Você pode editar o código CSS selecionando Mostrar opções de configuração avançadas na parte inferior da guia Estilos e selecionando a opção Exibir e editar CSS.
    10. Selecione Salvar.
      Sua página é atualizada e exibe as mudanças feitas no layout.
    11. Adicione componentes à sua página.
      Para obter mais informações, consulte Adicionar e configurar componentes.
    12. Exiba e teste sua página selecionando o botão Visualizar que abre a variante de página..

    Criar um layout Flexbox com o sistema de layout antigo

    Crie um layout Flexbox em Construtor de IU para criar páginas poderosas para que você possa personalizar com folhas de estilo em cascata (CSS) e melhorar seu desempenho.

    Antes de Iniciar

    Função necessária: administrador

    Por Que e Quando Desempenhar Esta Tarefa

    No procedimento a seguir, você aprende a usar o Flexbox para mudar o código CSS e personalizar o layout da sua página.

    Procedimento

    1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando + Criar.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
    3. Criar uma página no Construtor de IU ou abrir uma página.
    4. Clique na guia Layout e escolha o layout de duas colunas.
      Figura 2. Layout padrão de duas colunas
      Layout padrão de duas colunas.
    5. Clique em Editar código de layout.
      Figura 3. Editar o código de layout
      Edite o código do layout.
    6. Expanda o editor de código para que você possa exibir facilmente o código CSS.
      Figura 4. Expandir o editor de código
      Seta apontando para expandir o botão do editor de código.
    7. Adicione outro slot ao layout copiando o código CSS de um slot existente.

      Copiar o código é mais fácil do que digitá-lo no layout.

      Figura 5. Copiar o código CSS de um slot
      Seta apontando para copiar o código CSS de um slot.
    8. Abaixo do código que você copiou, coloque uma vírgula e cole o seguinte código CSS:
      1. Altere a propriedade "slotName" para "Coluna 3",.
      2. Altere a propriedade "flex" para "2".
      3. Adicione "margin-left": "1rem".
      Figura 6. Cole o código CSS
      Colando o código CSS.

      Alterar a propriedade "flex" aumenta o tamanho da coluna. Ao usar "margin-left", você adiciona espaço entre as colunas anteriores.

    9. Recolha a exibição expandida e clique em Aplicar.
      Figura 7. Aplicar uma mudança de layout
      Aplicando uma mudança de layout.

    Resultado

    O novo layout Flexbox que você criou mostra o novo slot que você adicionou ao layout original de duas colunas.
    Figura 8. Novo layout personalizado
    Layout personalizado novo e concluído.
    Clique em Redefinir para original para redefinir as mudanças de layout de volta para o original.
    Figura 9. Redefinir um layout
    Seta apontando para redefinir a opção original.