Controlo moderno de botões nas aplicações de canvas

O controlo moderno Button oferece um elemento clicável que ativa ações numa aplicação de tela, oferecendo um estilo flexível e capacidades abrangentes de interação.

Description

O controlo moderno do botão fornece um elemento clicável que ativa a lógica da aplicação quando selecionado. Use-o para submissão de formulários, navegação, confirmações e qualquer interação que exija intervenção do utilizador. O controlo suporta combinações de ícones e texto, estilo completo de fonte e múltiplos estilos de aparência através de temas Fluent. As principais propriedades deste controlo são Texto, Aparência e OnSelect.

Geral

Texto – A etiqueta mostrada no botão. Suporta qualquer texto ou fórmula Power Fx que avalie para uma cadeia. Use esta propriedade para definir ou alterar o texto do botão.

Visível – Se o controlo aparece ou está escondido. Usa uma fórmula Power Fx para mostrar ou esconder o botão consoante o estado da aplicação.

Comportamento

OnSelect – Use a propriedade OnSelect para definir o que acontece quando o botão é selecionado. É assim que a aplicação responde quando o utilizador seleciona o botão. O controlo é acessível: o OnSelect também é ativado quando o utilizador carrega em Enter ou Espaço enquanto o controlo tem foco no teclado.

DisplayMode – Se o controle permite a entrada do usuário (Editar), exibe apenas dados (View) ou está desativado (Disabled). Quando desativado, o botão fica visualmente diminuído e o OnSelect não dispara.

Introdução

O controlo moderno Button é um dos controlos mais usados no Power Apps. No seu cerne, um botão tem dois elementos essenciais: o texto que os utilizadores veem (a propriedade Texto ) e a ação que ocorre quando selecionado (a propriedade OnSelect ). Depois de compreender estes conceitos básicos, pode criar aplicações interativas que respondam às entradas do utilizador.

Definir texto do botão

Para alterar o texto que aparece no seu botão, defina a propriedade Texto :

• No painel de Propriedades: Introduza texto diretamente no campo Texto
• Usando uma fórmula: Text = "Click Me" ou Text = "Save " & TextInput1.Text

Torne os botões interativos

Defina o que acontece quando o utilizador seleciona o botão usando a propriedade OnSelect :

1. Selecione o botão na sua aplicação.
2. No painel de Propriedades, encontre a propriedade OnSelect .
3. Introduza a sua fórmula Power Fx, como Navigate(NextScreen).

Configurar propriedades de botões

O Power Apps utiliza uma abordagem simplificada para editar controlos.

• Selecione o botão na tela:
  • Use o painel de Propriedades à direita para modificar as propriedades básicas.
  • Usa a barra de fórmulas no topo para fórmulas avançadas.
  • Muda para propriedades avançadas para personalizações detalhadas.

Tamanho e posição

X – Distância entre a borda esquerda do controlo e a borda esquerda do seu contentor pai (ecrã se não houver recipiente pai).

Y – Distância entre a borda superior do controlo e a borda superior do seu contentor pai (ecrã se não houver recipiente pai).

Largura – Distância entre as bordas esquerda e direita do controlo. O padrão é 96.

Altura – Distância entre as bordas superior e inferior do controlo. O padrão é 32.

Alinhar – O alinhamento horizontal do conteúdo dos botões dentro do controlo. Aceita Align valores de enum: Align.Left, Align.Center, Align.Right, Align.Justify.

VerticalAlign – O alinhamento vertical do conteúdo dos botões. Aceita VerticalAlign valores de enum: VerticalAlign.Top, VerticalAlign.Middle, VerticalAlign.Bottom.

PaddingTop – Distância entre o conteúdo do botão e a borda superior do controlo.

PaddingBottom – Distância entre o conteúdo do botão e a borda inferior do controlo.

PaddingLeft – Distância entre o conteúdo do botão e a borda esquerda do controlo.

PaddingRight – Distância entre o conteúdo do botão e a borda direita do controlo.

Estilo e tema

Aparência – O estilo visual do botão. Aceita ButtonAppearance valores de enum:

BasePaletteColor – A cor base usada pelo tema para gerar a paleta de cores do controlo. Muda esta propriedade para aplicar uma cor de tema diferente ao botão.

Ícone – O nome do ícone Fluent para mostrar ao lado do texto do botão (por exemplo, "Add", "Save", "Delete"). Deixe em branco para um botão apenas de texto.

IconStyle – Quer o ícone seja apresentado em contorno ou em estilo preenchido. Aceita IconStyle valores de enum: IconStyle.Outline (por defeito) ou IconStyle.Filled.

IconRotation – Rotação em graus aplicada ao ícone. O padrão é 0.

Layout – A posição do ícone em relação ao texto do botão. Aceita ButtonLayout valores de enum:

Fonte – A família de fontes usada para a etiqueta de botões.

Tamanho – O tamanho da fonte da etiqueta do botão, em pontos.

Cor – A cor do texto do rótulo do botão.

FontWeight – O peso (espessura) da etiqueta do botão. Aceita FontWeight valores de enum: FontWeight.Bold, FontWeight.Semibold, FontWeight.Normal (por defeito), FontWeight.Lighter.

Itálico – Se a etiqueta do botão aparece em itálico.

Sublinhar – Se uma linha aparece sob o texto do rótulo do botão.

Riscar – Se uma linha aparece no meio do texto da etiqueta do botão.

BorderColor – A cor da borda do controlo.

BorderStyle – O estilo da borda do controlo. Aceita BorderStyle valores de enum: BorderStyle.Solid, BorderStyle.Dashed, BorderStyle.Dotted, ou BorderStyle.None.

BordaEspessura – A espessura da borda do controlo em pixels.

RadiusTopLeft – O raio do canto superior esquerdo do controlo.

RadiusTopRight – O raio do canto superior direito do controlo.

RaioInferiorEsquerdo – O raio do canto inferior esquerdo do controlo.

RadiusBottomRight – O raio do canto inferior direito do controlo.

Propriedades adicionais

Etiqueta Acessível – Etiqueta lida por leitores de ecrã. Forneça uma descrição significativa quando o rótulo do botão por si só não for suficiente (por exemplo, ao usar um botão apenas com ícones).

Dica de ferramenta – Texto explicativo que aparece quando o utilizador paira sobre o botão.

ContentLanguage – A linguagem de visualização do conteúdo de controlo, se diferente da linguagem da aplicação.

Example

O seguinte exemplo de YAML mostra um botão de submissão e um botão de cancelar com ações OnSelect:

- SubmitButton:
    Control: ModernButton@1.0.0
    Properties:
      Text: ="Submit"
      OnSelect: |
        SubmitForm(DataForm1);
        Navigate(SuccessScreen)
      Appearance: =ButtonAppearance.Primary
      Icon: ="Checkmark"
      IconStyle: =IconStyle.Outline
      Layout: =ButtonLayout.IconBefore
      AccessibleLabel: ="Submit the form"
      Tooltip: ="Submit your response"
      Width: =120
      Height: =36

- CancelButton:
    Control: ModernButton@1.0.0
    Properties:
      Text: ="Cancel"
      OnSelect: =Navigate(HomeScreen)
      Appearance: =ButtonAppearance.Outline
      Width: =120
      Height: =36

Padrões comuns de botões

Aqui estão implementações típicas de botões:

Botão de navegação:

OnSelect = Navigate(DetailsScreen, ScreenTransition.Fade)

Submissão de dados:

OnSelect = SubmitForm(Form1); Notify("Data saved!", NotificationType.Success)

Atualização da variável:

OnSelect = Set(IsVisible, !IsVisible)

Diálogo de confirmação:

OnSelect = If(
    Confirm("Are you sure you want to delete this item?"),
    Remove(Collection1, ThisItem)
)

Atualizações recentes

A versão atualizada do controlo moderno Button inclui as seguintes melhorias e alterações de comportamento.

Renomeações de propriedades

As seguintes propriedades são renomeadas. Atualize quaisquer fórmulas na sua aplicação que façam referência aos nomes antigos das propriedades.

Propriedades removidas

Correções de bugs e melhorias

• Enums atualizados: Appearance, Layout, e IconStyle agora usam enums Power Fx tipados (ButtonAppearance, ButtonLayout, IconStyle) em vez de valores de cadeia, melhorando o IntelliSense e reduzindo erros de fórmula.
• Suporte para tooltip: Nova Tooltip propriedade mostra texto explicativo ao passar o cursor.
• Melhorias na fronteira: Adicionadas BorderStyle e BorderThickness para um controlo de fronteira mais preciso. Quatro propriedades específicas de canto substituem BorderRadius o controlo independente dos cantos.
• Controlo total da fonte: As propriedades da fonte são agora consistentes com outros controlos modernos. Use Font, Size, Color, Italic, Underline, , e Strikethrough.

Ver também

• Visão geral dos controlos modernos
• Propriedades de tamanho e localização