- Botão de rádio
🧬 Montar componentes
Botão de rádio
ContributeBotão de rádio
Um botão de opção é selecionar componente de entrada que permite aos usuários selecionar uma opção de um grupo de opções predefinidas. Ele aparece como um botão quadrado arredondado, que pode ser selecionado ou desmarcado pelos usuários. Quando um botão de rádio é selecionado, todos os outros botões de rádio do mesmo grupo são automaticamente desmarcados, garantir que apenas uma opção pode ser selecionada de cada vez. Botões de rádio são comumente usados em formulários, questionários e pesquisas para ajudar os usuários a fazerem uma única escolha a partir de uma lista de opções.
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:
| propriedades | Descrição: |
|---|---|
| Descrição | O texto exibido para a opção |
| Valor | O valor associado à opção |
| Desabilitado | Se a opção está desabilitada para a seleção |
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.
| propriedades | Descrição: |
|---|---|
| Fonte de dados | Definir a fonte de dados das opções |
| Descrição | Use {{item}} para definir o rótulo de opções |
| Valor | Use {{item}} para definir o valor das opções |
| Desabilitado | Use {{item}} para definir se a opção está desabilitada para seleção |
Outras propriedades
| propriedades | Descrição: |
|---|---|
| Valor padrão | O valor inicial do componente. Você pode alterar dinamicamente o valor inicial digitando JavaScript na {{}}. |
| Espaço reservado | O valor será exibido quando o campo de entrada estiver vazio. |
| Descrição | O nome do campo exibido ao usuário |
| Descrição | Uma legenda usada para descrever o campo em detalhes |
| Etiqueta oculta | Definir se deve exibir o rótulo |
| Posição | Definir a posição do rótulo relativo ao componente |
| Alinhamento | Definir o alinhamento do rótulo |
| Width | Quando a etiqueta estiver no lado esquerdo do componente, defina a largura proporcional do rótulo |
| Gerenciador de Eventos | Acionar consultas, componentes de controle ou chamar outras APIs em resposta a eventos de componentes. |
| Desabilitado | Controla o estado de se o componente está desabilitado. O componente não pode ser modificado ou focado quando está desabilitado. |
| Somente leitura | Controla o status de se o componente é somente leitura. Um componente somente leitura pode ser selecionado e focado mas não pode ser modificado. |
| Exibir botão Limpar | Definir se deve mostrar o botão Limpar |
| Dica | Os usuários podem inserir a dica do componente aqui. A dica será exibida quando estiver focada. O formato Markdown é suportado. |
| Campo obrigatório | Válido somente quando o interruptor está ligado. |
| Regra personalizada | editor.inspect.setter_tooltip.regra_personalizada |
| Ocultar mensagem de validação | Você pode ocultar a mensagem de erro alterando o status oculto quando o valor de entrada está incorreto. Você pode alterar dinamicamente o status oculto por JavaScript. |
| Chave de Dados do Formulário | Especificar uma chave de um componente de formulários de embalagem ao construir o atributo de dados. |
| Hidden | Controle dinamicamente se o componente está oculto. Você pode alterar o status oculto através de um valor booleano dinâmico. |
| Cor do tema | Para selecionar a cor do tema do componente |
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”}}
| propriedades | Descrição: |
|---|---|
| Valor | Uma sequência de valores da opção selecionada. |
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
Nós suportamos ouvir o evento onChange do componente do botão de rádio.
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 grupo de botões de rádio, uma ação específica 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.
| Nome da propriedade | Descrição: |
|---|---|
| Valor | uma sequência de valores da opção selecionada |
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çãoPasso 2 configurar o componente
Define as fontes de dados para
{{postgresql1.data}}Configure o rótulo para alterar o rótulo com base no idioma.
- Use {{ item.columnName }} para definir a coluna.
- 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 }}
