Caixa de checagem (web)
O componente Caixa de checagem permite que o usuário escolha entre dois ou três estados (true, false ou null) 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
Aba de 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 Cronapp MVC 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. |
checkbox-theme | Altera a cor da borda e o preenchimento da caixa de checagem. | |
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. |
Tooltip | crn-tooltip | Permite adicionar um tooltip ao componente. Para configurá-lo, clique no botão (...) ao lado do campo. Para mais detalhes de configuração consulte a documentação Propriedades dos componentes visuais. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Cronapp MVC 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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Aba de Eventos
Na tabela abaixo estão descritos os tipos de eventos disponíveis para o componente Caixa de checagem.
Nome | Propriedade | Função |
|---|---|---|
Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
Ao Duplo Clicar | ng-dblclick | Executa uma ação quando o usuário clica duas vezes seguidas com o botão do mouse em um componente. |
Ao Entrar com Mouse | ng-mouseenter | Executa uma ação quando o ponteiro do mouse é movido de fora para dentro do elemento. |
Ao Sair com Mouse | ng-mouseleave | Executa uma ação quando o ponteiro do mouse é movido de dentro para fora do elemento. |
Ao Mover Mouse | ng-mousemove | Executa uma ação sempre que o evento de movimento do mouse ocorrer sobre o elemento. |
Aba de Estilos
Na tabela abaixo está descrito o tipo de estilo disponível para o componente Caixa de checagem.
Nome em português | Nome em inglês | Descrição |
|---|---|---|
Check (Marcado) | Checkbox (Selected) | Estiliza o componente quando marcado. |
Check (Desmarcado) | Checkbox (Unselected) | Estiliza o componente quando desmarcado. |
Cor da caixa de checagem
Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.
As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:
Alteração do tema do projeto (menor prioridade);
Adição da Skin do projeto através do campo "Skin do Tema Web" na janela de Configurações do Projeto.
Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).
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
Para exibir o status Indeterminado, o campo da entidade no diagrama de dados deve estar configurado como Lógico (booleano) e a opção Não Nulo desmarcada. Após o usuário clicar em uma caixa de checagem com o valor indeterminado, o status mudará para true ou false, não sendo mais possível retornar para indeterminado.
Observação do componente
O componente Caixa de seleção possui uma característica 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 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 (1), o evento vai ler o seu status (false), imprimir o status obtido (false) (2) 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.
Nome em inglês
Checkbox
Nessa página
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual