Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 8 Próxima »

Função

Componentes usados para organizar o layout do seu formulário em colunas de forma responsiva.


Figura 1 - Componente Colunas 3 em execução

Principais propriedades

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

Nome

Propriedade

Função

IdentificadoridAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.

Conteúdo

content

Define o rótulo.

EstilostyleAltera o estilo do componente de forma inline.
Exibirng-show

Propriedade Angular usada para mostrar ou oculta o componente.

Repetircrn-repeatPropriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurançacronapp-securityAbre a janela de seleção dos grupos com permissões para visualização ou edição da Grade.
Classes CSScssAdiciona classes CSS que já foram criadas.


Aba de Estilos

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

  

Sobre os componentes

Os componentes de Colunas, possuem um número e tamanho de colunas diferentes, todos são de forma responsiva, abaixo, colocamos um componente Título acima de cada componente para descrever a diferença de cada um, os tamanhos se referem à barra de responsividade.

Acesse a documentação de Responsividade para entender melhor como ela funciona.


Figura 2 - Componentes Coluna(s)


  1. Selecione uma coluna para verificarmos seu tamanho;
  2. Acesse a aba de Responsividade;
  3. Observe que há apenas 6 barras selecionadas, o que define o tamanho da coluna, isso pode ser alterado como desejar, poderia ser uma coluna de tamanho 7 e uma de tamanho 5.

Exemplo de uso

Abaixo, arrastamos para a coluna 1 do componente 3 Colunas 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 o Entrade de texto, Lista de opções e Botão (Figura 3.1)


Figura 3.1 - Projeto em execução





Nome em inglês

columns


Nessa página


Compatibilidade

  • Formulário web


Equivalente web

Não possui


Botões dos Componentes



Imagem no Editor Visual




  • Sem rótulos