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
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 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.
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)