Lista de opções
Last updated
Last updated
Um menu suspenso garante uma entrada fácil e sem erros do usuário, oferecendo uma lista de opções possíveis. PocketBlocks suporta a implementação de listas de opções usando componentes como Seletor e Seletor Mútiplo. Você pode configurar uma lista de opções manualmente ou mapeando dados de suas fontes de dados.
Cada lista de opções possui quatro propriedades.
Rótulo: o texto da opção exibido aos usuários
Valor: o identificador exclusivo da opção
Desativado: desativa a opção (o valor padrão é false)
Oculto: oculta a opção (o valor padrão é false)
Quando mais de uma opção em uma lista utiliza o mesmo valor, apenas a primeira opção é válida e, portanto, exibida.
Em Básico > Manual, clique em + Adicionar para criar uma nova opção. Selecione uma opção para configurá-lo manualmente. Você pode clicar em ··· para Duplicar ou Excluir uma opção e arrastar ⋮⋮ para organizar sua posição.
Verifique o valor da opção selecionada em Componentes no navegador de dados. Por exemplo, quando Nova York é selecionado, você pode encontrar o valor da string "1" para localizacaoSelecionada.
O modo manual é recomendado para estes cenários:
Gerenciável e enumerável manualmente.
Usado por apenas um componente.
Os dados não vêm de fontes de dados.
Quando você tiver dados da lista de opções provenientes de fontes de dados, transformadores ou estado temporário, poderá usar o Modo Mapeado. Em Básico > Mapeado, insira sua matriz de fonte de dados na caixa Dados usando código JavaScript (JS). Uma lista de opções será mapeada automaticamente a partir deste array. Por exemplo, acesse informações da universidade via {{universidade.dado}}. Cada item na matriz de resultados contém pais, paginas_web, codigo e nome.
Você pode referenciar o valor de qualquer campo de uma opção através de item e seu índice i, começando em 0. No exemplo a seguir, o Rótulo de cada opção é o nome da universidade, o Valor é web_page, e aqueles que contêm um parêntese de abertura ( em seus nomes estão desativados. O valor padrão é definido como paginas_web do primeiro item usando {{universidade.dado[0] .paginas_web}}. Observe que o valor padrão de uma lista de opções deve ser um elemento do array Valor, mas não do array Rótulo.
Verifique o valor da opção selecionada em Componentes no navegador de dados. Por exemplo, quando "Ahi Evran University" é selecionado, seu valor de string [\"http://www.ahievran.edu.tr/\"] é exibido.
