Função

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

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Lista de opção

Propriedades exibidas quando todo o componente é selecionado.

Item de opção

Propriedades exibida quando apenas um item do componente é selecionado.

Aba de Estilos

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

Cor do botão de opção

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 Web" na janela de Configurações do Projeto.
3. Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).

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). Para reordenar os itens, clique e segure no nome do item na propriedade Itens e arraste entre as opções.

Figura 2.1 - Adicionando um novo item à lista

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

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

Figura 2.3 - Selecionando o item que será editado

Na aba Propriedades do Item selecionado, edite a legenda e o valor do campo.

Figura 2.4 - Editando o item

Listas

independentes

Ao incluir vários componentes Lista de opção, os itens de cada lista atuam de forma conectada, ou seja, é possível marcar apenas uma única opção entre todos os itens dos componentes inseridos. Para que cada lista de opção atue de forma independente é necessário selecionar cada item de uma mesma lista na aba Propriedades do Item de opção e modificar o valor do Nome do Grupo (name), caso contrário, todos ficam no mesmo grupo.

Por padrão, o valor do Nome do Grupo de cada item de uma lista inserida é "optionsRadios". No exemplo abaixo, a propriedade Nome do Grupo dos itens "Sorvete" e "Gelatina", da "Lista 2", foi modificada para "optionsRadios2", enquanto os itens "Brigadeiro" e "Jujuba", da "Lista 1", permaneceu "optionsRadios". 

Figura 2.5 - Exemplo de configuração de uso de listas independentes

Essa distinção dos itens de uma lista por Nome do Grupo faz com que elas atuem de forma independente, sendo possível marcar uma opção em cada lista inserida.

Figura 2.6 - Exemplo de listas independentes no navegador

Obtendo o resultado

das Listas

A função abaixo imprime no console do navegador os itens selecionados em cada uma das Listas de opção inseridas anteriormente (Figura 2.5). O bloco Obter valor do Campo recebe o Valor (ng-model) da aba Propriedades do editor de views de cada Lista de opção.Para selecioná-lo é necessário vincular o bloco de programação a um formulário de referência, confira no tópico Propriedades do Blockly da documentação Bloco de Programação.

Figura 2.7 - Função para obter o resultado dos itens selecionados da Lista de opção

Figura 2.8 - Resultado exibido a partir das configurações da Figura 2.7