Selecionar

​

Um componente de seleção é comumente usado para apresentar usuários com uma lista de opções em um formato de menu suspenso. O usuário pode selecionar apenas uma opção da lista suspensa por vez.

O componente de seleção única suspenso normalmente consiste em um rótulo de texto e um ícone de seta no menu suspenso, ao clicar ou tocar, abre uma lista de opções para o usuário escolher. Uma vez que o usuário seleciona uma opção, o menu suspenso fecha e a opção selecionada é exibida no componente.

Este componente é frequentemente usado em formulários, pesquisas, e outros cenários de entrada de dados onde um usuário precisa selecionar uma opção em um conjunto predefinido de escolhas. Oferece uma maneira compacta e intuitiva de apresentar uma lista de opções sem pegar em muitas telas ou sobrecarregar o usuário com muitas opções de uma só vez.

​

propriedades

​

Opções de manual

Adicione novas opções ou apague as opções manualmente e configure as opções uma por uma. As propriedades das opções são as seguintes:

​

Opções mapeadas

Você também pode adicionar opções de uma fonte de dados mapeando as propriedades do rótulo e valor aos campos de dados correspondentes. Desta forma, você pode obter opções dinamicamente a partir do banco de dados. No final desse artigo, nós demonstraremos como usá-lo através de um exemplo.

​

Outras propriedades

​

Método

Você pode usar outros componentes para controlar o componente. Apoiamos os seguintes três métodos:

​

definirValor

Para definir a opção selecionada, por exemplo, {{”value1”}}

​

clearValue

Para limpar as opções selecionadas

​

validate

Para verificar se a informação de entrada é legal

​

validar

Para limpar a mensagem de validação

​

Manipulador de eventos

Oferecemos suporte para o evento onChange do componente de seleção.

Quando a opção selecionada muda, ela pode acionar uma ação específica. Isto significa que quando um usuário seleciona uma opção diferente de um componente selecionado, uma ação em particular pode ser tomada com base na opção selecionada. Por exemplo, em um formulário web, selecionar uma opção diferente pode acionar a exibição de diferentes campos de formulário ou o envio do formulário para um destino diferente. Desta forma, a opção selecionada pelo usuário pode afetar o comportamento do software ou aplicativo da web que ele está usando. A capacidade de acionar ações especificadas com base na entrada do usuário é um aspecto importante do design de software interativo e pode melhorar a usabilidade e funcionalidade do software.

​

Dado

O componente tem alguns dados comumente usados, que podem ser chamados através do {{componentName.propertyName}} no aplicativo.

​

Usar caso

Em seguida, mostraremos como usar o modo mapeado para obter opções dinamicamente.

​

Passo 1 Adicionar uma ação

Criamos uma tabela chamada selection, incluindo 5 colunas: options_en, options_jp, options_zh, options_zh, options_kr, value. Nós armazenamos os valores de opção em ‘valor’ e o rótulo de opções armazenadas em diferentes idiomas em outras colunas.

Crie uma ação para listar todos os dados em selection chamado postgresql1

selecione * de seleção

​

Passo 2 configurar o componente

1. Define as fontes de dados para {{postgresql1.data}}

2. Configure o rótulo para alterar o rótulo com base no idioma.

   1. Use {{ item.columnName }} para definir a coluna.
   2. Use {{ currentUserInfo.language }} para definir o idioma que os usuários usam na ILLA.

   {{currentUserInfo.language=='ja-JP' ? item.options_jp 
   : currentUserInfo.language == 'ko-KR' ? item.options_kr 
   : currentUserInfo.language == 'zh-CN' ? item.options_zh 
   : item.options_en }}