Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O componente Caixa de checagem permite que o usuário escolha entre dois ou três estados para um item. Normalmente escolhas que são mutuamente exclusivas, por exemplo: definir um texto em “negrito” ou “não negrito”.
Figura 1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|---|---|
Título | content | Define o rótulo. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Valor inicial | ng-initial-value | Define o status inicial ao carregar o componente Caixa de checagem. Opções: Sim e Não. |
Cor da caixa de checagem | checkbox-theme | Altera a cor da caixa de checagem ativa. |
Permitir Valores Nulos | crn-allow-null-values | Permite que a caixa de seleção possa ter três status: True, False e Null (indefinido). |
Valor para falso | ng-false-value | Diretiva que específica o valor da expressão caso o componente não seja selecionado. |
Valor para verdadeiro | ng-true-value | Diretiva que específica o valor da expressão caso o componente seja selecionado. |
Requerido | ng-required | Define o preenchimento obrigatório pelo usuário. |
identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo geral do componente da 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. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Aba de Estilos
Na tabela abaixo está descrito o tipo de estilo disponível para o componente Checkbox.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Caixa de checagem | Checkbox | Estiliza o componente. |
Permitir Valores Nulos
O componente Caixa de checagem pode possuir dois status (true e false) ou três (true, false e indeterminate). O valor indeterminado normalmente é utilizado para informar que o usuário ainda não definiu esse campo, salvando-o como nulo no banco de dados.
Figura 2 - Os três valores da Caixa de checagem
Informações |
---|
Para permitir salvar o status Indeterminado no banco de dados, o campo da entidade no diagrama de dados deve estar configurado como Lógico (booleano) e a opção Não Nulo desmarcada. |
Observação do componente
O componente Caixa de seleção possui algumas características própria, descrevemos abaixo.
Tempo de execução
Se colocarmos um evento que obtenha e imprima o status do checkbox ao clicar no componente, teremos a sensação de que algo está errado. Pois quando quando marcamos o checkbox, o status impresso no console é false e quando desmarcamos o componente, o true é exibido. Isso ocorre pois a chamada para o evento é mais rápida do que a alteração do status. Assim, ao clicar no checkbox desmarcado, o evento vai ler o seu status (false), imprimir o status obtido (false) e só depois será alterado para true.
Figura 3 - Retorno no console
Podemos comprovar isso adicionando o bloco Dormir com o valor de 1 milissegundo antes do bloco imprime. Nesse caso, ao clicar no checkbox desmarcado, o evento aguardará 1 milissegundo, tempo suficiente para o checkbox alterar seu status antes do console exibir o valor true.
Acesso aos subcomponentes
Os componentes do Cronapp possuem o ícone cadeado (destaque 1 da figura 4) na barra de opções do componente para permitir acessar seus subcomponentes (figura 4). Porém, ao desbloquear o cadeado do componente Caixa de checagem, só será possível acessar o subelemento label (rótulo).
Figura 4 - Apenas o label será acessível ao desbloquear o componente
Caso necessite acessar as propriedades apenas do subelemento checkbox (input), recomendamos selecionar o componente (destaque 1 da figura 4.1), acessar a aba Hierarquia (destaque 2), selecionar o subelemento input (3) e, em seguida, selecionar a aba de Propriedades (4).
Dica |
---|
Vale destacar que todas as propriedades do componente, incluindo as dos seus subelementos, estão disponíveis ao selecionar o componente Caixa de checagem, o procedimento apresentado aqui é necessário apenas para, por exemplo, incluir uma nova propriedade no subelemento input. |
Figura 4.1 - Acesso as propriedades do input na Caixa de seleção
Nome em inglês
Checkbox
Nessa página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual