Controle do botão no PowerAppsButton control in PowerApps

Um controle que o usuário pode clicar ou tocar para interagir com o aplicativo.A control that the user can click or tap to interact with the app.

DescriçãoDescription

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.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

Propriedades-chaveKey properties

OnSelect – como o aplicativo responde quando o usuário toca ou clica em um controle.OnSelect – How the app responds when the user taps or clicks a control.

Text – texto que aparece em um controle ou que o usuário digita em um controle.Text – Text that appears on a control or that the user types into a control.

Propriedades adicionaisAdditional properties

Align – a localização do texto em relação ao centro horizontal do respectivo controle.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect – desabilita automaticamente o controle enquanto o comportamento OnSelect está sendo executado.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor – a cor da borda do controle.BorderColor – The color of a control's border.

BorderStyle – se a borda do controle é Solid, Dashed, Dotted ou None.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – a espessura da borda do controle.BorderThickness – The thickness of a control's border.

FocusedBorderThickness – a espessura da borda de um controle quando ele tem o foco do teclado.FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color – a cor do texto em um controle.Color – The color of text in a control.

DisplayMode – se o controle permite entrada do usuário (Edição), apenas exibe dados (Exibição) ou está desabilitado (Desabilitado).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – a cor da borda de um controle se a propriedade DisplayMode do controle estiver definida como Desabilitado.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – a cor do texto em um controle se sua propriedade DisplayMode estiver definida como Desabilitado.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – a cor da tela de fundo de um controle se sua propriedade DisplayMode estiver definida como Desabilitado.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – a cor da tela de fundo de um controle.Fill – The background color of a control.

Font – o nome da família de fontes no qual o texto é exibido.Font – The name of the family of fonts in which text appears.

FontWeight – o peso do texto em um controle: Bold (negrito), Semibold, Normal ou Lighter (mais leve).FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – a distância entre a parte superior do controle e as bordas inferiores.Height – The distance between a control's top and bottom edges.

HoverBorderColor – a cor da borda do controle quando o usuário mantém o ponteiro do mouse nesse controle.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – a cor do texto em um controle quando o usuário mantém o ponteiro do mouse sobre ele.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – a cor da tela de fundo de um controle quando o usuário mantém o ponteiro do mouse sobre ele.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – se o texto em um controle está em itálico.Italic – Whether the text in a control is italic.

PaddingBottom – a distância entre o texto em um controle e a borda inferior desse controle.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – a distância entre o texto em um controle e a borda esquerda desse controle.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – a distância entre o texto em um controle e a borda direita desse controle.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – a distância entre o texto em um controle e a borda superior desse controle.PaddingTop – The distance between text in a control and the top edge of that control.

PressedTrue enquanto um controle está sendo pressionado, false caso contrário.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor – a cor da borda do controle quando o usuário toca ou clica nesse controle.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – a cor do texto em um controle quando o usuário toca ou clica nesse controle.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – a cor da tela de fundo de um controle quando o usuário toca ou clica nesse controle.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – o grau para o qual o canto inferior esquerdo de um controle é arredondado.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – o grau para o qual o canto inferior direito de um controle é arredondado.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – o grau para o qual o canto superior esquerdo de um controle é arredondado.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – o grau para o qual o canto superior direito de um controle é arredondado.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size – o tamanho da fonte do texto que aparece em um controle.Size – The font size of the text that appears on a control.

Strikethrough – se uma linha é exibida cortando o texto que aparece em um controle.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – personaliza a ordem de tabulação de controles em tempo de execução quando definida como um valor diferente de zero.TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Tooltip – um texto explicativo aparece quando o usuário passa o mouse sobre um controle.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – se uma linha é exibida sob o texto que aparece em um controle.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – a localização do texto em um controle em relação ao centro vertical desse controle.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – se um controle é exibido ou está oculto.Visible – Whether a control appears or is hidden.

Width – a distância entre das bordas esquerda e direita de um controle.Width – The distance between a control's left and right edges.

X – a distância entre a borda esquerda de um controle e a borda esquerda de seu contêiner pai (tela, se não houver contêiner pai).X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – a distância entre a borda superior de um controle e a borda superior de seu contêiner pai (tela, se não houver contêiner pai).Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( ScreenName, ScreenTransitionValue )Navigate( ScreenName, ScreenTransitionValue )

ExemplosExamples

Adicionar uma fórmula básica a um botãoAdd a basic formula to a button

  1. Adicione um controle Entrada de texto e nomeie-o como Fonte.Add a Text input control, and name it Source.

    Não sabe como adicionar, nomear e configurar um controle?Don't know how to add, name, and configure a control?

  2. Adicione um controle de Botão, defina sua propriedade Text para “Adicionar” e defina sua propriedade OnSelect para esta fórmula:Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)}) UpdateContext({Total:Total + Value(Source.Text)})

    Deseja obter mais informações sobre a função UpdateContext ou outras funções?Want more information about the UpdateContext function or other functions?

  3. Adicione um controle Rótulo, defina sua propriedade Text para Total e pressione F5.Add a Label control, set its Text property to Total, and then press F5.
  4. Limpe o texto padrão de Fonte, digite um número e, em seguida, clique ou toque em Adicionar.Clear the default text from Source, type a number in it, and then click or tap Add.

    O controle Rótulo mostra o número que você digitou.The Label control shows the number that you typed.

  5. Limpe o número de Fonte, digite outro número e, em seguida, clique ou toque em Adicionar.Clear the number from Source, type another number in it, and then click or tap Add.

    O controle Rótulo mostra a soma dos dois números que você digitou.The Label control shows the sum of the two numbers that you typed.

  6. (opcional) Repita a etapa anterior uma ou mais vezes.(optional) Repeat the previous step one or more times.
  7. Para retornar ao espaço de trabalho padrão, pressione ESC (ou clique ou toque no ícone de fechamento no canto superior direito).To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Configurar um botão com várias fórmulasConfigure a button with multiple formulas

Adicione uma fórmula que limpa o controle Entrada de texto entre entradas.Add a formula that clears the Text input control between entries.

  1. Defina a propriedade HintText da Fonte para “Insira um número”.Set the HintText property of Source to "Enter a number".
  2. Defina a propriedade OnSelect de Adicionar como esta fórmula:Set the OnSelect property of Add to this formula:

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

    Observação: separe várias fórmulas com um ponto e vírgula ";".Note: Separate multiple formulas with a semi-colon “;”.

  3. Defina a propriedade Default de Fonte como ClearInput.Set the Default property of Source to ClearInput.
  4. Pressione F5 e, em seguida, teste o aplicativo adicionando vários números juntos.Press F5, and then test the app by adding several numbers together.

Adicione outro botão para redefinir o totalAdd another button to reset the total

Adicione um segundo botão para limpar o total entre cálculos.Add a second button to clear the total between calculations.

  1. Adicione outro controle de Botão, defina sua propriedade Text para “Limpar” e defina sua propriedade OnSelect como esta fórmula:Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})UpdateContext({Total:0})

  2. Pressione F5, adicione vários números juntos e, em seguida, clique ou toque em Limpar para redefinir o total.Press F5, add several numbers together, and then click or tap Clear to reset the total.

Alterar a aparência de um botãoChange a button's appearance

Alterar a forma de um botãoChange a button's shape

Por padrão, o PowerApps cria um controle de Botão retangular com cantos arredondados.By default, PowerApps creates a rectangular Button control with rounded corners. É possível fazer modificações básicas na forma de um controle de Botão definindo suas propriedades de Height, Width e Radius.You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

Observação: Ícones e Formas fornece uma ampla variedade de designs e pode executar algumas das mesmas funções básicas dos controles Botão.Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. No entanto, Ícones e Formas não tem uma propriedade Text.However, Icons and Shapes don’t have a Text property.

  1. Adicione um controle de Botão e defina suas propriedades Height e Width como 300 para criar um botão quadrado grande.Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. Modifique as propriedades RadiusTopLeft, RadiusTopRight, RadiusBottomLeft e RadiusBottomRight para ajustar o grau de curvatura em cada canto.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Veja alguns exemplos de formas diferentes, cada uma começando com um botão quadrado 300 x 300:Here are some examples of different shapes, each one starting from a 300 x 300 square button:

Alterar a cor de um botão ao passar o mouse sobre eleChange a button's color when you hover over it

Por padrão, a cor de preenchimento de um controle de Botão fica esmaecida em 20% ao passar o mouse sobre ele.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. É possível ajustar esse comportamento alterando a propriedade HoverFill, que usa a função ColorFade.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. Se a fórmula ColorFade for definida com 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.If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • Altere o percentual de ColorFade na propriedade HoverFill de um dos botões que você criou e observe os efeitos.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

Também é possível especificar a cor de um controle de 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").You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

Observação: o valor de cor pode ser qualquer definição de cor CSS, um nome ou um valor hexa.Note: The color value can be any CSS color definition, either a name or a hex value.

  • Substitua a função ColorFade por uma função ColorValue em um dos botões que você criou e observe os efeitos.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.