Função

Componentes usados para organizar o layout do seu formulário em colunas de forma responsiva, permitindo também a adição de outros componentes em cada subcoluna. Os 6 componentes Colunas possuem como única diferença a quantidade de subcolunas e a disposição de seus layouts. Consulte o tópico Responsividade das subcolunas para mais detalhes.

Figura 1 - Componente Colunas em execução

Principais propriedades

Aba de Propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

Aba de Estilos

Os componentes Colunas não possuem propriedades de estilo específicas.

Trabalhando com subcolunas

O componente Colunas possui 6 botões para adicionar e redimensionar suas subcolunas (destaques 3 e 4 da figura 2). É importante destacar que, para utilizar esses botões, primeiramente é necessário selecionar um dos tipos de redimensionamento da página (1). Dessa forma, o componente se ajustará ao tamanho da tela selecionada.

Para visualizar os botões de redimensionamento do componente, clique em uma subcoluna e, em seguida, no botão "Redimensionar elemento" (2). Após essa ação, os botões serão exibidos (3 e 4). Esses botões permitem adicionar ou redimensionar as subcolunas do componente conforme a configuração de cada coluna. A descrição abaixo da figura 2 fornece mais detalhes sobre cada botão exibido. Na imagem abaixo, na parte inferior, a coluna 2 foi redimensionada (5) utilizando o botão de seta para a esquerda do destaque 3.

Figura 2 - Botões das subcolunas

Destaques 3 da figura 2:

• Botão de adição: permite adicionar subcolunas à esquerda da subcoluna selecionada.
• Seta para esquerda: permite aumentar à esquerda o tamanho da subcoluna selecionada.
• Seta para direita: permite reduzir à direita o tamanho da subcoluna selecionada.

Destaques 4 da figura 2:

• Botão de adição: permite adicionar subcolunas à direita da subcoluna selecionada.
• Seta para esquerda: permite aumentar à direita o tamanho da subcoluna selecionada.
• Seta para direita: permite reduzir à esquerda o tamanho da subcoluna selecionada.

É importante destacar que os botões de adição podem ser utilizados até que a quantidade de subcolunas da coluna selecionada atinja a quantidade máxima definida para seu tamanho. A soma de todas as subcolunas do componente deve possuir o espaço de 12 barras. Por exemplo, na imagem abaixo, há um componente coluna com duas subcolunas (6/6) (destaque 1 da figura 2.1). Dessa forma, cada coluna pode conter até 6 subcolunas. No destaque 2, vemos que a primeira coluna já possui 6 subcolunas, não sendo possível adicionar mais subcolunas, a menos que o tamanho da segunda coluna seja reduzido.

Figura 2.1 - Componente 2 Colunas (6/6) 

Adicionar / Remover subcolunas

Além de ser possível adicionar novas subcolunas com os botões de adição (destaques 1 da figura 2.2), também é possível utilizar o botão "Adicionar" da propriedade Itens (2). Para adicionar uma nova subcoluna, selecione o componente na área de edição e, na propriedade Itens, clique no botão "+" (Adicionar). Se o componente coluna presente na view já estiver totalizando 12 barras, a próxima coluna a ser adicionada será inserida abaixo das subcolunas existentes, como mostra o destaque 3.

Para remover uma subcoluna, clique no ícone de lixeira (4). Para reordenar as subcolunas, clique e segure a subcoluna que deseja mover na propriedade Itens e arraste-a para a posição desejada entre as demais (5).

Figura 2.2 - Configuração das colunas

Responsividade das subcolunas

Além de redimensionar as subcolunas utilizando os botões de redimensionamento, também é possível utilizar os recursos da aba Responsividade (destaque 2 da figura 2.3). Os componentes Coluna possuem diferentes quantidades e tamanhos de subcolunas que se ajustam de forma responsiva. Na imagem abaixo, colocamos um componente Título acima de cada componente para descrever as diferenças entre eles; os tamanhos referem-se à barra de responsividade.

Figura 2.3 - Componentes Colunas

1. Selecione uma subcoluna para verificarmos seu tamanho.
2. Acesse a aba de Responsividade.
3. Observe que há apenas 6 barras marcadas, o que define o tamanho da coluna, isso pode ser alterado como desejar, por exemplo, a primeira coluna com 7 e a segunda com 5.

Exemplo de uso

Abaixo, arrastamos para a primeira coluna do componente 3 Colunas(3/6/3) o componente Entrada de texto (figura 3), da mesma forma pode ser adicionado componentes nas demais colunas.

Figura 3 - Adicionando componentes às colunas

Após mais componentes serem adicionados às outras colunas, execute o seu projeto e visualize, no nosso exemplo adicionamos os componentes Entrada de texto, Lista de opção e Botão (figura 3.1)

Figura 3.1 - Projeto em execução