Knapp modern kontroll i appar för arbetsytor

Den moderna knappkontrollen ger ett klickbart element som utlöser åtgärder i en app för arbetsytor, vilket ger flexibel formatering och omfattande interaktionsfunktioner.

Description

Den moderna kontrollen Knapp innehåller ett klickbart element som utlöser applogik när den väljs. Använd den för formuläröverföringar, navigering, bekräftelser och all interaktion som kräver användarindata. Kontrollen stöder ikon- och textkombinationer, full teckensnittsformat och flera utseendeformat via Fluent-teman. Viktiga egenskaper för den här kontrollen är Text, Utseende och OnSelect.

Allmänt

Text – etiketten som visas på knappen. Stöder all text eller Power Fx-formel som utvärderas till en sträng. Använd den här egenskapen för att ange eller ändra knapptexten.

Synlig – om kontrollen visas eller är dold. Använd en Power Fx-formel för att visa eller dölja knappen baserat på apptillstånd.

Beteende

OnSelect – Använd egenskapen OnSelect för att definiera vad som händer när knappen är markerad. Det är så appen svarar när användaren väljer knappen. Kontrollen är tillgänglig: OnSelect utlöses också när användaren trycker på Retur eller Blanksteg medan kontrollen har tangentbordsfokus.

DisplayMode – Om kontrollen tillåter användarindata (Redigera), endast visar data (Visa) eller är inaktiverad (inaktiverad). När knappen är inaktiverad är den visuellt nedtonad och OnSelect utlöses inte.

Komma igång

Den moderna knappkontrollen är en av de vanligaste kontrollerna i Power Apps. I grunden har en knapp två viktiga element: texten som användarna ser (egenskapen Text ) och den åtgärd som inträffar när den väljs (egenskapen OnSelect ). När du förstår grunderna kan du skapa interaktiva appar som svarar på användarindata.

Ange knapptext

Om du vill ändra vilken text som visas på knappen anger du egenskapen Text :

• I fönstret Egenskaper: Ange text direkt i fältet Text
• Använda en formel: Text = "Click Me" eller Text = "Save " & TextInput1.Text

Gör knappar interaktiva

Definiera vad som händer när användare väljer knappen med egenskapen OnSelect :

1. Välj knappen i din app.
2. Leta reda på egenskapen OnSelect i fönstret Egenskaper.
3. Ange din Power Fx-formel, till exempel Navigate(NextScreen).

Konfigurera knappegenskaper

Power Apps använder en effektiv metod för redigering av kontroller.

• Välj knappen på arbetsytan:
  • Använd fönstret Egenskaper till höger för att ändra grundläggande egenskaper.
  • Använd formelfältet högst upp för avancerade formler.
  • Växla till Avancerade egenskaper för detaljerad anpassning.

Storlek och position

X – Avståndet mellan kontrollens vänstra kant och den överordnade containerns vänstra kant (skärm om det inte finns någon överordnad container).

Y – Avstånd mellan kontrollens övre kant och den överordnade containerns övre kant (skärm om ingen överordnad container).

Bredd – Avstånd mellan kontrollens vänstra och högra kanter. Standardvärdet är 96.

Höjd – Avstånd mellan kontrollens övre och nedre kanter. Standardvärdet är 32.

Justera – Den vågräta justeringen av knappinnehållet i kontrollen. Accepterar uppräkningsvärden Align : Align.Left, Align.Center, Align.Right, Align.Justify.

VerticalAlign – Den lodräta justeringen av knappinnehållet. Accepterar uppräkningsvärden VerticalAlign : VerticalAlign.Top, VerticalAlign.Middle, VerticalAlign.Bottom.

PaddingTop – Avstånd mellan knappinnehållet och kontrollens övre kant.

PaddingBottom – Avstånd mellan knappinnehållet och kontrollens nedre kant.

PaddingLeft – Avstånd mellan knappinnehållet och kontrollens vänstra kant.

PaddingRight – Avstånd mellan knappinnehållet och kontrollens högra kant.

Format och tema

Utseende – knappens visuella format. Accepterar uppräkningsvärden ButtonAppearance :

BasePaletteColor – basfärgen som används av temat för att generera kontrollens färgpalett. Ändra den här egenskapen om du vill använda en annan temafärg på knappen.

Icon – Fluent-ikonens namn som ska visas tillsammans med knapptexten (till exempel "Add", "Save", "Delete"). Lämna tom för en textknapp.

IconStyle – om ikonen återges i disposition eller ifyllt format. Accepterar uppräkningsvärden IconStyle : IconStyle.Outline (standard) eller IconStyle.Filled.

IconRotation – Rotation i grader som tillämpas på ikonen. Standardvärdet är 0.

Layout – positionen för ikonen i förhållande till knapptexten. Accepterar uppräkningsvärden ButtonLayout :

Teckensnitt – teckensnittsfamiljen som används för knappetiketten.

Storlek – teckenstorleken på knappetiketten i punkter.

Färg – färgen på knappetikettens text.

FontWeight – knappetikettens vikt (tjocklek). Accepterar uppräkningsvärden FontWeight : FontWeight.Bold, FontWeight.Semibold, FontWeight.Normal (standard), FontWeight.Lighter.

Kursiv – Om knappetiketten visas i kursiv stil.

Understrykning – Om en rad visas under knappetikettens text.

Genomstruken – Om en linje visas i mitten av knappetikettens text.

BorderColor – färgen på kontrollens kantlinje.

BorderStyle – stilen för kontrollens kantlinje. Accepterar uppräkningsvärden BorderStyle : BorderStyle.Solid, BorderStyle.Dashed, BorderStyle.Dottedeller BorderStyle.None.

BorderThickness – tjockleken på kontrollens kantlinje i bildpunkter.

RadiusTopLeft – hörnradien för kontrollens övre vänstra hörn.

RadiusTopRight – hörnradien för kontrollens övre högra hörn.

RadiusBottomLeft – hörnradien för kontrollens nedre vänstra hörn.

RadiusBottomRight – hörnradien för kontrollens nedre högra hörn.

Ytterligare egenskaper

AccessibleLabel – Etikett som läse av skärmläsare. Ange en beskrivande beskrivning när enbart knappetiketten inte räcker (till exempel när du använder en knapp med endast ikon).

Knappbeskrivning – förklarande text som visas när användaren hovrar över knappen.

ContentLanguage – visningsspråket för kontrollinnehållet, om det skiljer sig från appspråket.

Example

I följande YAML-exempel visas en skicka-knapp och en avbryt-knapp med OnSelect-åtgärder:

- 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

Vanliga knappmönster

Här är vanliga knappimplementeringar:

Navigeringsknapp:

OnSelect = Navigate(DetailsScreen, ScreenTransition.Fade)

Dataöverföring:

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

Variabeluppdatering:

OnSelect = Set(IsVisible, !IsVisible)

Bekräftelsedialogruta:

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

Senaste uppdateringarna

Den uppdaterade versionen av den moderna knappkontrollen innehåller följande förbättringar och beteendeändringar.

Egenskapsnamnändringar

Följande egenskaper har bytt namn. Uppdatera alla formler i din app som refererar till de gamla egenskapsnamnen.

Borttagna egenskaper

Felkorrigeringar och förbättringar

• Uppdaterade uppräkningar: Appearance, Layoutoch IconStyle använder nu inskrivna Power Fx-uppräkningar (ButtonAppearance, ButtonLayout, IconStyle) i stället för strängvärden, vilket förbättrar IntelliSense och minskar formelfel.
• Knappbeskrivningsstöd: Den nya Tooltip egenskapen visar förklarande text vid hovring.
• Gränsförbättringar: Har lagts till BorderStyle och BorderThickness för mer exakt gränskontroll. Fyra hörnspecifika egenskaper ersätter BorderRadius för oberoende hörnkontroll.
• Fullständig teckensnittskontroll: Teckensnittsegenskaperna är nu konsekventa med andra moderna kontroller. Använd Font, Size, Color, Italic, Underlineoch Strikethrough.

Se även

• Översikt över moderna kontroller
• Egenskaper för storlek och plats