Componentes usados para organizar o layout do seu formulário em colunas de forma responsiva. Os 6 componentes possuem como única diferença a quantidade de colunas e a disposição de seus layouts.
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
Identificador
id
Atributo 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.
Estilo
style
Altera o estilo do componente de forma inline.
Exibir
ng-show
Propriedade Angular usada para mostrar ou oculta o componente.
Repetir
crn-repeat
Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança
cronapp-security
Abre a janela de seleção dos grupos com permissões para visualização ou edição da Grade.
Classes CSS
css
Adiciona 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 quantidade 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.
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.
A soma de todas as colunas deve possuir um total de 12 barras.
Exemplo de uso
Abaixo, arrastamos para a primeira coluna 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 Entrada de texto, Lista de opções e Botão (Figura 3.1)