Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
A caixa de seleção fixa é um componente do tipo combobox e seus itens são alimentados manualmente nas configurações do componente. Normalmente é utilizado em situações onde há necessidade de exibir uma pequena lista de opções com valores fixos ou enviar valores recorrentes - Seja para manter o padrão de inserção no banco de dados ou para facilitar a seleção pelo usuário.
O componente possui um campo de pesquisa que atualiza o filtro a cada caractere informado pelo usuário.
Figura 1.1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
---|---|---|
Configuração | options | Abre uma janela para personalização do componente. |
Título | content | Define um rótulo. |
Valor | ng-model | Propriedade |
Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. | ||
Requerido | ng-required | Define que o campo é de preenchimento obrigató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 de forma inline. |
Exibir | ng-show | Propriedade |
Angular usada para exibir 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 | 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. |
Aba de Estilos
Na tabela abaixo está descrito o tipo de estilo disponível para o componente Caixa de seleção fixa.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Título | Title | Estiliza o título do componente. |
Caixa de seleção | Combobox | Estiliza a caixa de seleção do componente. |
Sugestão | Placeholder | Estiliza a sugestão do componente. |
Seta | Dropdown | Estiliza a seta do componente. |
Item Selecionado | Selected Item | Estiliza o item selecionado no componente. |
Lista de Itens | Item List | Estiliza a lista de itens no componente. |
Item da Lista Hover | Item List Hover | Estiliza o item da lista hover. |
Configuração
A janela Configuração possui diversas propriedades para a personalização do componente. Selecione o componente no editor visual para exibir suas propriedades na aba lateral e clique no botão “...” da propriedade Configuração para abrir a janela. (Figura 2.2)
Figura 2.1 - Personalizações aplicadas através das configurações do componente
Os itens (chave e valor) foram inseridos na aba Geral, a figura do livro foi adicionada na aba Cabeçalho, o texto "Fim da lista" na aba Rodapé e na aba Elementos , definimos o modo de exibição dos itens: chave - valor "símbolo copyright".
Aba Geral
Apresenta as configurações mais usuais, como de adicionar ou remover uma opção da lista.
Ao solicitar o valor do campo da Caixa de seleção fixa, sempre será retornado o identificador do elemento selecionado.
Image Modified
Figura 2.2 - Janela de configuração
Placeholder: exibe um texto exemplo antes do usuário selecionar uma opção, seu uso é opcional e permite internacionalização;.
Tipo Filtro: define a forma de pesquisa da lista de opções:
Contendo: mostra as opções que contêm a sequência das letras digitadas;
Iniciando com: mostra as opções que comecem com a sequência das letras digitadas;
Final com: mostra as opções que terminem com a sequência das letras digitadas;.
- Botão "+": adiciona novo item à lista da caixa de seleção fixa;.
Campo Chave: define o identificador dos itens;.
Campo Texto: define o conteúdo que será mostrado na caixa de seleção para o usuário.
Editar: abre uma janela para fazer a edição do item;.
Excluir: exclui o item.
Usar Template Personalizado: ao selecionar, a aba Elementos é exibida para personalizar o texto listado.
Editar campo
Ao clicar nos botões "+" ou editar de um dos elementos da lista, a janela Adicionar é aberta, permitindo inserir o texto estático e uma chave, que pode ser inclusive dinâmica, obtida por bloco de programação ou campo da tela. (Figura 2.3)
Figura 2.3 - Obtendo a chave do item através de um bloco de programação
Aba Cabeçalho
Na aba cabeçalho é possível adicionar texto ou HTML para ser exibido na caixa de seleção, antes da lista (Figura 2.4).
Figura 2.4 - Inserindo uma imagem no início da lista
Aba Rodapé
Na aba Rodapé é possível adicionar texto ou elementos HTML - podendo ser de parágrafo, imagem, entre outros - e, assim, criar uma área no início da lista de opções exibidas pelo componente (Figura 2.5).
Figura 2.5 - Configuração e resultado no browser da aba rodapé
Aba Elementos
A aba Elementos só é exibida ao selecionar a opção Usar Template Personalizado na aba Geral. Ela permite configura a apresentação das opções ao abrir a caixa de seleção, podendo mostrar outros campos do item, junto ao texto estático. (Figura 2.6)
A expressão para exibir os dados do campo texto da caixa é: #: data.value # enquanto os dados do campo chave é: #: data.key #. Mas, é possível inserir qualquer caractere antes ou depois dessas expressões.
No exemplo da figura 2.6, cada item da lista será exibido da seguinte forma: <identificador> - <nome> ©
Figura 2.6 - Configuração e resultado no browser da aba elementos
Nome em inglês
Combobox
Nesta página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Image Modified
Imagem no Editor Visual
Image Modified