Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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.
Image Added
Figura 1 - Componente Colunas em execução
Principais propriedades
Aba de 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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | css | Adiciona classes CSS que já foram criadas. |
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.
Image Added
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.
Image Added
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).
Image Added
Figura 2.2 - Configuração das colunas
Âncora responsividadeDasSubcolunas responsividadeDasSubcolunas
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.
Dica |
---|
Acesse a documentação Responsividade para entender melhor como ela funciona. |
Image Added
Figura 2.3 - Componentes Colunas
- Selecione uma subcoluna para verificarmos seu tamanho.
- Acesse a aba 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.
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.
Image Added
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)
Image Added
Figura 3.1 - Projeto em execução
Nome em inglês
columns
Nessa página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente web
Não possui
Botões dos Componentes
Image RemovedImage Added
Imagem no Editor Visual
Image RemovedImage Added