Controlo de botões nas Power Apps

Um controle no qual o usuário pode clicar ou tocar para interagir com o aplicativo.

Description

Configure a propriedade OnSelect de um controle Button para executar uma ou mais fórmulas quando o usuário clicar ou tocar no controle.

Propriedades principais

OnSelect – Ações a serem executadas quando o usuário toca ou clica em um controle.

Texto – Texto que aparece em um controle ou que o usuário digita em um controle.

Propriedades adicionais

Alinhar – A localização do texto em relação ao centro horizontal de seu controle.

AutoDisableOnSelect – Desativa automaticamente o controle enquanto o comportamento OnSelect está em execução.

BorderColor – A cor da borda de um controle.

BorderStyle – Se a borda de um controle é Sólida, Tracejada, Pontilhada ou Nenhuma.

BorderThickness – A espessura da borda de um controle.

Cor – A cor do texto em um controle.

ContentLanguage - O idioma do conteúdo do controle, se diferente do contêiner do controle.

DisplayMode – Se o controle permite a entrada do usuário (Editar), exibe apenas dados (View) ou está desativado (Disabled).

DisabledBorderColor – A cor da borda de um controle se a propriedade DisplayMode do controle estiver definida como Disabled.

DisabledColor – A cor do texto em um controle se sua propriedade DisplayMode estiver definida como Disabled.

DisabledFill – A cor de plano de fundo de um controle se sua propriedade DisplayMode estiver definida como Disabled.

FocusedBorderColor – A cor da borda de um controle quando o controle está focado.

FocusedBorderThickness – A espessura da borda de um controle quando o controle está focado.

Preenchimento – A cor de fundo de um controlo.

Fonte – O nome da família de fontes na qual o texto aparece.

FontWeight – O peso do texto em um controle: negrito, seminegrito, normal ou mais leve.

Altura – A distância entre as bordas superior e inferior de um controle.

HoverBorderColor – A cor da borda de um 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 de fundo de um controle quando o usuário mantém o ponteiro do mouse sobre ele.

Itálico – 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.

Pressionado – Verdadeiro enquanto um controle está sendo pressionado, falso caso contrário.

PressedBorderColor – A cor da borda de um 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 de fundo de um controlo quando o utilizador toca ou clica nesse controlo.

RadiusBottomLeft – O grau em que o canto inferior esquerdo de um controle é arredondado.

RadiusBottomRight – O grau em que o canto inferior direito de um controle é arredondado.

RadiusTopLeft – O grau em que o canto superior esquerdo de um controle é arredondado.

RadiusTopRight – O grau em que o canto superior direito de um controle é arredondado.

Tamanho – O tamanho da fonte do texto que aparece em um controle.

Tachado – Se uma linha aparece através do texto que aparece em um controle.

TabIndex – Ordem de navegação do teclado em relação a outros controles.

Dica de ferramenta – Texto explicativo que aparece quando o usuário passa o mouse sobre um controle.

Sublinhado – Se uma linha aparece 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.

Visível – Se um controle aparece ou está oculto.

Largura – A distância entre as bordas esquerda e direita de um controle.

X – a distância entre o limite esquerdo de um controlo e o limite esquerdo do respetivo recipiente principal (do ecrã, se não existir um recipiente principal).

Y – a distância entre o limite superior de um controlo e o limite superior do recipiente principal (do ecrã, se não existir um recipiente principal).

Funções relacionadas

Navigate( ScreenName, ScreenTransitionValue )

Examples

Adicionar uma fórmula básica a um botão

1. Adicione um controlo Text input e atribua-lhe o nome Origem.

   Não sabe como adicionar, atribuir um nome e configurar um controlo?

2. Adicione um controle Button , defina sua propriedade Text como "Add" e defina sua propriedade OnSelect para esta fórmula:
   UpdateContext({Total:Total + Valor(Source.Text)})

   Quer obter mais informações sobre a função UpdateContext ou outras funções?

3. Adicione um controle Label , defina sua propriedade Text na barra de fórmulas como Value(Total) e pressione F5.

4. Limpe o texto padrão da Fonte, digite um número e clique ou toque em Adicionar.

   O controle Label mostra o número que você digitou.

5. Limpe o número da Origem, digite outro número e clique ou toque em Adicionar.

   O controle Label mostra a soma dos dois números que você digitou.

6. (facultativo) Repita o passo anterior uma ou mais vezes.

7. Para voltar ao espaço de trabalho padrão, pressione Esc (ou clique ou toque no ícone de fechar no canto superior direito).

Configurar um botão com várias fórmulas

Adicione uma fórmula que limpe o controle de entrada Text entre entradas.

1. Defina a propriedade HintText de Source como "Enter a number".

2. Defina a propriedade OnSelect de Add a esta fórmula:

   UpdateContext({Total:Total + Valor(Source.Text)});
   UpdateContext({ClearInput: ""})

   Observação

   Separe várias fórmulas com um ponto-e-vírgula ";".

3. Defina a propriedade Default de Source como ClearInput.

4. Prima F5 e, em seguida, teste a aplicação adicionando vários números juntos.

Adicionar outro botão para redefinir o total

Adicione um segundo botão para limpar o total entre os cálculos.

1. Adicione outro controle Button , defina sua propriedade Text como "Clear" e defina sua propriedade OnSelect para esta fórmula:

   UpdateContext({Total:0})

2. Prima F5, adicione vários números e, em seguida, clique ou toque em Limpar para repor 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 Button retangular com cantos arredondados. Você pode fazer modificações básicas na forma de um controle Button definindo suas propriedades Height, Width e Radius .

1. Adicione um controle Button e defina suas propriedades Height e Width como 300 para criar um botão quadrado grande.

2. Modifique as propriedades RadiusTopLeft, RadiusTopRight, RadiusBottomLeft e RadiusBottomRight para ajustar a quantidade de curvatura em cada canto. Aqui estão alguns exemplos de formas diferentes, cada uma a partir de um botão quadrado de 300 x 300:

   • Defina todos os quatro valores de raio como 150 para criar um círculo.
   • Defina os valores para RadiusTopLeft e RadiusBottomRight como 300 para criar um Button em 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 tabulação.

Alterar a cor de um botão ao passar o mouse sobre ele

Por padrão, a cor de preenchimento de um controle Button diminuirá em 20% quando você passar o mouse sobre ele. Você pode ajustar esse comportamento alterando a propriedade HoverFill , que usa a função ColorFade . Se você definir a fórmula ColorFade como uma porcentagem positiva, a cor ficará mais clara quando você passar o mouse sobre o botão, enquanto uma porcentagem negativa tornará a cor mais escura.

• Altere a porcentagem de ColorFade na propriedade HoverFill de um dos botões criados e observe os efeitos.

Você também pode especificar a cor de um controle Button definindo sua propriedade HoverFill como uma fórmula que contém a função ColorValue em vez da função ColorShade , como em ColorValue("Red").

• 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 cor

• Aplicam-se requisitos de contraste de cor padrão .

Suporte a leitor de ecrã

• O texto deve estar presente.

Suporte de teclado

• TabIndex deve ser zero ou maior para que os usuários do teclado possam navegar até ele.
• Os indicadores de focalização devem ser claramente visíveis. Use FocusedBorderColor e FocusedBorderThickness para conseguir isso.