Controle Botão no Power Apps
Um controle que o usuário pode clicar ou tocar para interagir com o aplicativo.
Descrição
Configure a propriedade OnSelect de um controle Botão para executar uma ou mais fórmulas quando o usuário clica ou toca no controle.
Principais propriedades
OnSelect – Ações a serem executadas quando o usuário tocar ou clicar em um controle.
Text – texto que aparece em um controle ou que o usuário digita em um controle.
Propriedades adicionais
Align – a localização do texto em relação ao centro horizontal do respectivo controle.
AutoDisableOnSelect – desabilita automaticamente o controle enquanto o comportamento OnSelect está sendo executado.
BorderColor – a cor da borda do controle.
BorderStyle – se a borda do controle é Sólida, Tracejada, Pontilhada ou Nenhuma.
BorderThickness – a espessura da borda do controle.
Color – a cor do texto em um controle.
DisplayMode – se o controle permite entrada do usuário (Edição), apenas exibe dados (Exibição), ou está desabilitado (Desabilitado).
DisabledBorderColor – a cor da borda de um controle se a propriedade DisplayMode do controle estiver definida como Desabilitado.
DisabledColor – a cor do texto em um controle se sua propriedade DisplayMode estiver definida como Desabilitado.
DisabledFill – a cor da tela de fundo de um controle se sua propriedade DisplayMode estiver definida como Desabilitado.
FocusedBorderColor – a cor da borda do controle quando ele está focalizado.
FocusedBorderThickness – A espessura da borda de um controle quando ele está focalizado.
Fill – a cor da tela de fundo de um controle.
Font – o nome da família de fontes em que o texto é exibido.
FontWeight – o peso do texto em um controle: Negrito , Seminegrito, Normal ou Mais claro.
Height – a distância entre a parte superior do controle e as bordas inferiores.
HoverBorderColor – a cor da borda do controle quando o usuário mantém o ponteiro do mouse nesse controle.
HoverColor – a cor do texto em um controle quando o usuário mantém o ponteiro do mouse sobre ele.
HoverFill – a cor da tela de fundo de um controle quando o usuário mantém o ponteiro do mouse sobre ele.
Italic – se o texto em um controle está em itálico.
PaddingBottom – a distância entre o texto em um controle e a borda inferior desse controle.
PaddingLeft – a distância entre o texto em um controle e a borda esquerda desse controle.
PaddingRight – a distância entre o texto em um controle e a borda direita desse controle.
PaddingTop – a distância entre o texto em um controle e a borda superior desse controle.
Pressed – verdadeiro enquanto um controle está sendo pressionado, falso caso contrário.
PressedBorderColor – a cor da borda do controle quando o usuário toca ou clica nesse controle.
PressedColor – a cor do texto em um controle quando o usuário toca ou clica nesse controle.
PressedFill – a cor da tela de fundo de um controle quando o usuário toca ou clica nesse controle.
RadiusBottomLeft – o grau para o qual o canto inferior esquerdo de um controle é arredondado.
RadiusBottomRight – o grau para o qual o canto inferior direito de um controle é arredondado.
RadiusTopLeft – o grau para o qual o canto superior esquerdo de um controle é arredondado.
RadiusTopRight – o grau para o qual o canto superior direito de um controle é arredondado.
Size – o tamanho da fonte do texto que aparece em um controle.
Strikethrough – se uma linha é exibida cortando o texto que aparece em um controle.
TabIndex – ordem de navegação do teclado em relação a outros controles.
Tooltip – texto explicativo exibido quando o usuário passa o mouse sobre um controle.
Underline – se uma linha é exibida sob o texto que aparece em um controle.
VerticalAlign – a localização do texto em um controle em relação ao centro vertical desse controle.
Visible – se um controle é exibido ou está oculto.
Width – a distância entre as bordas esquerda e direita de um controle.
X – a distância entre a borda esquerda de um controle e a borda esquerda de seu contêiner pai (ou a tela, se não houver contêiner pai).
Y – a distância entre a borda superior de um controle e a borda superior de seu contêiner pai (ou a tela, se não houver contêiner pai).
Funções relacionadas
Navigate( ScreenName, ScreenTransitionValue )
Exemplos
Adicionar uma fórmula básica a um botão
Adicione um controle Entrada de texto e nomeie-o como Fonte.
Não sabe como adicionar, nomear e configurar um controle?
Adicione um controle Botão, defina sua propriedade Text como "Adicionar", e a propriedade OnSelect como esta fórmula:
UpdateContext({Total:Total + Value(Source.Text)})Deseja obter mais informações sobre a função UpdateContext ou outras funções?
Adicione um controle Rótulo, defina sua propriedade Text na barra de fórmulas como Valor (Total) e pressione F5.
Limpe o texto padrão de Fonte, digite um número e, em seguida, clique ou toque em Adicionar.
O controle Rótulo mostra o número que você digitou.
Limpe o número de Fonte, digite outro número e, em seguida, clique ou toque em Adicionar.
O controle Rótulo mostra a soma dos dois números que você digitou.
(opcional) Repita a etapa anterior uma ou mais vezes.
Para retornar ao espaço de trabalho padrão, pressione Esc (ou clique ou toque no ícone para fechar no canto superior direito).
Configurar um botão com várias fórmulas
Adicione uma fórmula que limpa o controle Entrada de texto entre entradas.
Defina a propriedade HintText de Fonte como “Insira um número”.
Defina a propriedade OnSelect de Adicionar como esta fórmula:
UpdateContext({Total:Total + Value(Source.Text)});
UpdateContext({ClearInput: ""})Observação
Separe várias fórmulas com um ponto e vírgula “;”.
Defina a propriedade Default de Fonte como ClearInput.
Pressione F5 e, em seguida, teste o aplicativo adicionando vários números juntos.
Adicionar outro botão para redefinir o total
Adicione um segundo botão para limpar o total entre cálculos.
Adicione outro controle Botão, defina sua propriedade Text como “Limpar” e defina sua propriedade OnSelect como esta fórmula:
UpdateContext({Total:0})
Pressione F5, adicione vários números juntos e, em seguida, clique ou toque em Limpar para redefinir o total.
Alterar a aparência de um botão
Alterar a forma de um botão
Por padrão, o Power Apps cria um controle Botão retangular com cantos arredondados. É possível fazer modificações básicas na forma de um controle Botão definindo suas propriedades Height, Width e Radius.
Observação
Ícone e Formas fornecem uma ampla variedade de designs e podem executar algumas das mesmas funções básicas dos controles Botão. No entanto, Ícone e Formas não tem uma propriedade Text.
Adicione um controle Botão e defina suas propriedades Height e Width como 300 para criar um botão quadrado grande.
Modifique as propriedades RadiusTopLeft, RadiusTopRight, RadiusBottomLeft e RadiusBottomRight para ajustar o grau de curvatura em cada canto. Veja alguns exemplos de formas diferentes, cada uma começando com um botão quadrado 300 x 300:
- Defina todos os valores de Radius como 150 para criar um círculo.
- Defina os valores de RadiusTopLeft e RadiusBottomRight como 300 para criar um Botão com forma de folha.
- Defina os valores de RadiusTopLeft e RadiusTopRight como 300 e os valores de RadiusBottomLeft e RadiusBottomRight como 100 para criar um botão em forma de guia.
Alterar a cor de um botão ao passar o mouse sobre ele
Por padrão, a cor de preenchimento de um controle Botão fica esmaecida em 20% ao passar o mouse sobre ele. É possível ajustar esse comportamento alterando a propriedade HoverFill, que usa a função ColorFade. Se a fórmula ColorFade for definida como um percentual positivo, a cor ficará mais clara ao passar o mouse sobre o botão, enquanto um percentual negativo fará a cor ficar mais escura.
- Altere o percentual de ColorFade na propriedade HoverFill de um dos botões que você criou e observe os efeitos.
Também é possível especificar a cor de um controle Botão definindo sua propriedade HoverFill como uma fórmula que contém a função ColorValue, em vez da função ColorFade, assim como em ColorValue("Red").
Observação
O valor de cor pode ser qualquer definição de cor CSS, um nome ou um valor hexadecimal.
- Substitua a função ColorFade por uma função ColorValue em um dos botões que você criou e observe os efeitos.
Diretrizes de acessibilidade
Contraste de cores
- Os requisitos de contraste de cores padrão se aplicam.
Suporte ao leitor de tela
- Text precisa estar presente.
Suporte de teclado
- TabIndex deve ser zero ou maior para que os usuários de teclado possam navegar para ela.
- Os indicadores de foco precisam ser evidentes. Use FocusedBorderColor e FocusedBorderThickness para fazer isso.
Observação
Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)
A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).