Organizar componentes nas páginas do Construtor de IU

Os layouts de coluna organizam os componentes em uma página Construtor de IU. Saiba como os layouts de coluna são usados em Construtor de IU.

Os layouts de coluna permitem criar páginas úteis e visualmente atraentes em uma experiência. Um layout de coluna é um tipo de contêiner flexível que pode conter componentes. Os layouts de coluna podem ter colunas de larguras iguais ou diferentes. Você pode configurar o layout de coluna como um todo e as colunas individuais no layout. Por exemplo, defina uma largura e cor de borda diferentes para um layout de coluna e para as colunas individuais no layout. Os layouts de coluna podem conter colunas vazias em uma página Construtor de IU para criar espaço em branco. Use vários layouts de coluna em uma página. Por exemplo, um layout de duas colunas pode conter um cabeçalho e uma imagem, um layout de três colunas abaixo dele pode conter mais componentes, como uma lista e um formulário.

Pense no layout da sua página antes de começar a criá-la. Analise o que você deseja alcançar e a complexidade do layout da página. Essas perguntas determinam que tipo de layout ou layouts de coluna você deve usar.

Os layouts de coluna em Construtor de IU usam regras de CSS (folhas de estilo em cascata) baseadas em padrões e tecnologias de layout da Web, como Flexbox, grade CSS e posicionamento absoluto. Portanto, tudo o que você pode fazer em CSS, pode fazer aqui. Visite a Mozilla para saber mais sobre CSS.

Nota:

Se você tiver páginas Construtor de IU criadas em uma versão anterior (Utah ou Tóquio), poderá atualizar para o Vancouver e adicionar layouts de coluna às páginas.

No momento, os itens a seguir não são compatíveis com layouts de coluna:

• Ocultar/mostrar colunas com base em condições.
• Arrastar colunas em um layout para reordená-las.
• Renomear colunas (no entanto, você pode renomear um layout de coluna).

• Layouts de coluna
  Layouts de coluna são usados para projetar e organizar páginas Construtor de IU.
• Atualização de layouts no Construtor de IU
  Atualize os layouts criados em Quebec e Rome para o novo sistema de layout.
• Como usar layouts do Flexbox no Construtor de IU
  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.
• Uso de layouts de Grade CSS para criar uma página
  Crie um layout de Grade CSS 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.
• Mudar o layout de uma página criada em Quebec ou Rome
  Adicione e modifique o design do layout para mudar a aparência da página. Escolha como os componentes são exibidos em uma página por meio de tecnologias de layout da Web de Folhas de estilos em cascata (CSS), como Flexbox e Grade CSS.