Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Função

A lista de opções permite que o usuário selecione apenas uma das opções exibidas.


Image Modified

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Lista de opção

Propriedades exibida quando todo o componente é selecionado.

Nome

Propriedade

Função

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

valor

ng-model

Propriedade

AngularJS

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

Cor do botão de opção

option-theme

Altera a cor do botão de opção.

EstilostyleAltera o estilo geral do componente da forma inline

Identificador

id

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

Exibir

ng-show

Propriedade

AngularJS

Angular usada para exibir 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ça

cronapp-security

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

Classes CSS

class

Adiciona classes CSS já criadas.

Itens-Permite adicionar, ordenar, configurar e excluir itens estáticos na lista.

Item de opção

Propriedades exibida quando apenas um item do componente é selecionado.

Nome

Propriedade

Função

Valor do campo

value

Valor que identifica o item selecionado.

Conteúdo

Legenda

content

Define o rótulo do item. É possível internacionalizar este conteúdo.

Checked

Selecionado

ng-

checked

Insira

true

Sim para definir o item que iniciará marcado.

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

Adiciona classes CSS já criadas.

EstilostyleAltera o estilo geral do componente da forma inline.

Exibir

ng-show

Propriedade

AngularJS

Angular usada para exibir 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ça

cronapp-security

Propriedade 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 item com base nos perfis selecionados.

Classes CSS

class

Adiciona classes CSS já criadas.

Informações

Caso o campo ng-checked hecked tenha sido marcado como true Sim em mais de um item, o último item que recebeu esse valor será o previamente selecionado.

Aba de Estilos

Na tabela abaixo está descrito o tipo de estilo disponível para o componente Lista de opção.

Nome em portuguêsNome em inglêsDescrição

Lista de opção

Radio Group

Legenda

Caption

Estiliza a legenda do componenteo componente em geral.
Botão da opçãoOption ButtonEstiliza o botão de opção.

Configurações

Adicionar / Remover um item

Para adicionar um novo item, selecione o componente na área de edição e na propriedade Itens clique no botão + (Adicionar).


Image Modified

Figura 2.1 - Adicionando um novo item à lista


Para remover um item, clique no ícone lixeira desse item na propriedade Itens.


Image Modified

Figura 2.2 - Removendo um item da lista

Editar item

Para editar um item, selecione a lista de opções (1 da Figura 2.3), acesse a propriedade Itens na aba lateral Propriedades (2) e clique no item que deseja modificar (3). Após a seleção, as propriedades da Lista de opções (Figura 2.3) serão substituídas pelas propriedades do Item de Opção (Figura 2.4).


Image Modified

Figura 2.3 - Selecionando o item que será editado


Na aba Propriedades do Item de opçãoselecionado, edite o conteúdo a legenda e o valor do campo.


Image Modified

Figura 2.4 - Editando o item

Nome em inglês

Radio Group


Nesta página

Índice
maxLevel3
printablefalse

Compatibilidade

  • Formulário web


Equivalente mobile

Lista de Opção (mobile)


Botão do Componente

Image Modified


Imagem no Editor Visual

Image Modified