ILLA home page
  1. Botão

​

O componente botão permite aos usuários acionar uma ação ou executar uma função clicando no botão.

​
propriedades

propriedadesDescrição:
textoO texto exibido para o botão
Gerenciador de EventosAcionar consultas, componentes de controle ou chamar outras APIs em resposta a eventos de componentes.
Carregando…Se o componente deve mostrar um indicador de carregamento.
DesabilitadoControla o estado de se o componente está desabilitado. O componente não pode ser modificado ou focado quando está desabilitado.
DicaO usuário pode inserir dica do componente aqui. A dica será exibida quando estiver focada. O formato Markdown é suportado.
HiddenControle dinamicamente se o componente está oculto. Você pode alterar o status oculto através de um valor booleano dinâmico.
VariantePermitir que os usuários escolham entre dois estilos diferentes para o botão: preencha ou esboço.
Cor do TemaPermite aos usuários especificar a cor e a opacidade do fundo do botão

​
Manipulador de eventos

EventoDescrição:
ClickQuando um usuário clica neste botão, executar a ação específica personalizada pelos usuários.

​
Dado

O componente tem alguns dados comumente usados, que podem ser chamados via {{componentName.propertyName}} no aplicativo.

Nome da propriedadeDescrição:
colorEsquemacor de fundo do botão
desabilitadoum valor booleano indica o status de desabilitado
mostrarNomeo nome deste componente (iie button1)
hiddenum valor booleano indica o status oculto do botão
dinâmica ocultaum valor booleano indica o status dinâmico oculto do botão
carregandovalor de carregamento
Textovalor do texto exibido no botão
dicaTextovalor da dica de texto
varianteestilo variante do botão (preencha ou esboçado)

​
Usar caso

Em seguida, vamos demonstrar como usar o botão para controlar o componente form dinamicamente.

​
Passo 1 Adicionar uma ação

Criamos uma tabela chamada countries, incluindo 5 colunas: num_code, alpha_2_code, alpha_3_code, en_short_name, nationality. Os nomes dos países são o que queremos usar como valor de opções, que são armazenados na coluna en_short_name.

Então, podemos criar uma nova ação para Suabase a partir da lista de ações, listando todos os dados em países e nomeado supabasedb1 

selecionar distinto en_short_name como valor de "País" ordem por valor;

É isso que temos como saída:

Clique em Salvar e Executar para ativar esta ação.

​
Passo 2 Adicionar um Componente

Primeiro nós adicionamos o componente Form e rotulamos como ‘Survey’. Em seguida, arrastamos um componente de entrada, um componente de seleção e um componente de entrada numérica para o formulário, rotulando-o como Nome, Nationality, e Idade.

Em seguida, mapeamos os valores países para selecionar o componente de

  1. no modo mapeado, defina as fontes de dados como {{supabasedb1.data}}
  2. na opção mapeada, defina o valor como {{item.value}}

Então, podemos configurar o botão Submit para controlar o método Send do componente Form.

  1. No manipulador de Editar evento, selecione componente de controle em ação, selecione o componente form que você deseja atualizar como o alvo do evento.
  2. Escolha a ação Enviar.