Compartilhar via

Controle de botão no Power Apps

Um controle que 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.

Principais propriedades

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 – o local do texto em relação ao centro horizontal de seu controle.

AutoDisableOnSelect – desabilita 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 é Solid, Dashed, Dotted ou None.

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 (Exibição) ou está desabilitado (Desabilitado).

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

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

DisabledFill – A cor da tela de fundo de um controle se sua propriedade DisplayMode estiver definida como Desabilitada.

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.

Fill – a cor da tela de fundo de um controle.

Fonte – o nome da família de fontes em que o texto é exibido.

FontWeight – O peso do texto em um controle: Negrito, Semiaberto, 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 da tela 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 é 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 – True enquanto um controle está sendo pressionado, caso contrário, false .

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 da tela de fundo de um controle quando o usuário toca ou clica nesse controle.

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 por meio 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 exibido quando o usuário passa o mouse sobre um controle.

Sublinhado – se uma linha aparece sob o texto que aparece em um controle.

VerticalAlign – o local 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 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).

Navigate( ScreenName, ScreenTransitionValue )

Exemplos

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

  1. Adicione um controle Text input e nomeie-o como Source.

    Não sabe como adicionar, nomear e configurar um controle?

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

    Quer 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 Valor(Total) e pressione F5.

  4. Desmarque o texto padrão da Origem, digite um número nele e clique ou toque em Adicionar.

    O controle Rótulo mostra o número que você digitou.

  5. Desmarque o número de Origem, digite outro número nele e clique ou toque em Adicionar.

    O controle Rótulo mostra a soma dos dois números que você digitou.

  6. (opcional) Repita a etapa anterior uma ou mais vezes.

  7. Para retornar ao workspace padrão, pressione Esc (ou clique ou toque no ícone fechar no canto superior direito).

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

Adicione uma fórmula que limpa o controle de entrada de texto entre entradas.

  1. Defina a propriedade HintText de Origem como "Inserir um número".

  2. Defina a propriedade OnSelect de Adicionar 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 Padrão de Origem como ClearInput.

  4. Pressione F5 e 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.

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

    UpdateContext({Total:0})

  2. Pressione F5, adicione vários números juntos e 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 de botão retangular com cantos arredondados. Você pode fazer modificações básicas na forma de um controle Button definindo suas propriedades Height, Width e Radius .

Observação

Ícones e formas fornecem uma ampla variedade de designs e podem executar algumas das mesmas funções básicas que os controles button fazem. No entanto, Ícones e Formas não têm uma propriedade Text .

  1. Adicione um controle Button e defina suas propriedades de Altura e Largura 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 começando a partir de um botão de 300 x 300 quadrados:

Alterar a cor de um botão quando você 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ê passa o mouse sobre o botão, enquanto uma porcentagem negativa torna a cor mais escura.

  • Altere a porcentagem ColorFade na propriedade HoverFill de um dos botões que você criou 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 ColorFade , como em ColorValue("Red").

Observação

O valor de cor pode ser qualquer definição de cor CSS, um nome ou um valor hex.

  • 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

Suporte ao leitor de tela

Suporte ao teclado

  • Last updated on