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


Image RemovedImage Added

Figura 1. 1 - Exemplo do componente rodando no simulador

Principais

propriedades

Propriedades

Na tabela abaixo estão descritos descritas as principais propriedades (Figura 2) para o funcionamento básico do componente.

ConteúdoDefine rótulo

Nome

Propriedade

Função

TítulocontentAltera o texto do Título.

valorValor

ng-model

Propriedade AngularJS Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.

Tema da caixa de checagem

xattr-theme

Define um tema para o checkbox.*

Valor inicial

ng-initial-value

Define o status inicial ao carregar o componente checkbox.

Permitir Valores Nulos

crn-allow-null-values

Permite que a caixa de seleção possa ter três status: True, False e Null.

Valor se falsong-false-valueRealiza uma ação caso o valor do campo seja falso.
Valor se verdadeirong-true-valueRealiza uma ação caso o valor do campo seja verdadeiro.

Requerido

ng-required

Define o preenchimento obrigatório pelo usuário.

identificadorIdentificador

id

Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.

* Os temas exibidos são padrões do Ionic framework.

componente.

EstilostyleAltera o estilo do componente da forma inline.
Exibirng-showPropriedade Angular usada para mostrar ou oculta o componente.
Repetircrn-repeatPropriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurançacronapp-securityPropriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados.
Skincrn-skinPermite selecionar um skin que afetará apenas o componente selecionado.
Classes CSSclassAdiciona classes CSS que já foram criadas.

Adicionando Estilos

Na tabela abaixo estão descritos as principais propriedades de estilo do componente.

Nome

Nome em inglês

Função

Plano de fundo

Background

Estiliza o plano de fundo do componente.

Título

Title

Estiliza o título do componente.

Âncora
permitirValoresNulos
permitirValoresNulos

Permitir Valores Nulos

O componente Checkbox pode possuir dois status (true e false) ou três três estados (true, false e Indeterminate 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.


Image RemovedImage Added

Figura 2 .1 - Os três valores do checkbox


Informações
titleLEMBRETE

Para permitir salvar o status Indeterminado no banco de dados, o campo da entidade , no diagrama Diagrama de dados, deve está configurado como Lógico (booleano) e a opção Não Nulo desmarcada.

Âncora
tema
tema

Tema da Caixa de Checagem

A propriedade tema permite personalizar e padronizar cada componentes em um total de 9 cores distintas. Veja abaixo a lista disponível.

Image RemovedFigura 2.2 - Temas disponíveis

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:

  1. Alteração do tema do projeto (menor prioridade);
  2. Adição da Skin do projeto através do campo "Skin do Tema Mobile" na janela de Configurações do Projeto.
  3. Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).

Nome em inglês

Checkbox


Nessa página

Índice
maxLevel3
printablefalse

Compatibilidade

  • Formulário mobile


Equivalente web

Checkbox Caixa de checagem (web)


Botão do Componente

Image Removed

Image Added


Imagem no Editor Visual

Image Removed

Image Added