Knap moderne kontrolelement i lærredsapps

Det moderne knapkontrolelement indeholder et element, der kan klikkes på, og som udløser handlinger i en lærredsapp, der giver fleksibel formatering og omfattende interaktionsfunktioner.

Beskrivende tekst

Kontrolelementet Button modern indeholder et element, der kan klikkes på, og som udløser applogik, når det vælges. Brug den til formularindsendelser, navigation, bekræftelser og enhver interaktion, der kræver brugerinput. Kontrolelementet understøtter ikon- og tekstkombinationer, fuld skrifttypeformatering og flere typografier for udseende via Fluent-temaer. Nøgleegenskaberne for dette kontrolelement er Tekst, Udseende og OnSelect.

Almindelig

Text – den etiket, der vises på knappen. Understøtter enhver tekst- eller Power Fx-formel, der evalueres til en streng. Brug denne egenskab til at angive eller ændre knapteksten.

Visible – om kontrolelementet vises eller er skjult. Brug en Power Fx-formel til at få vist eller skjule knappen baseret på appens tilstand.

Adfærd

OnSelect – brug egenskaben OnSelect til at definere, hvad der sker, når knappen vælges. Det er den måde, appen reagerer på, når brugeren vælger knappen. Kontrolelementet er tilgængeligt: OnSelect udløses også, når brugeren trykker på Enter eller Mellemrum, mens kontrolelementet har tastaturfokus.

DisplayMode – om kontrolelementet tillader brugerinput (Edit), kun viser data (View) eller er deaktiveret (Disabled). Når den er deaktiveret, nedtones knappen visuelt, og OnSelect udløses ikke.

Kom godt i gang

Det moderne knapkontrolelement er et af de mest anvendte kontrolelementer i Power Apps. I sin kerne har en knap to vigtige elementer: den tekst, som brugerne får vist (egenskaben Text ) og den handling, der sker, når den vælges (egenskaben OnSelect ). Når du har forstået disse grundlæggende funktioner, kan du oprette interaktive apps, der reagerer på brugerinput.

Angiv knaptekst

Hvis du vil ændre, hvilken tekst der vises på knappen, skal du angive egenskaben Text :

• I ruden Egenskaber: Skriv tekst direkte i feltet Tekst
• Brug af en formel: Text = "Click Me" eller Text = "Save " & TextInput1.Text

Gør knapper interaktive

Definer, hvad der sker, når brugerne vælger knappen ved hjælp af egenskaben OnSelect :

1. Vælg knappen i din app.
2. Find egenskaben OnSelect i ruden Egenskaber.
3. Angiv din Power Fx-formel, f.eks Navigate(NextScreen). .

Konfigurer egenskaber for knap

Power Apps bruger en strømlinet tilgang til redigering af kontrolelementer.

• Vælg knappen på lærredet:
  • Brug ruden Egenskaber til højre til at redigere grundlæggende egenskaber.
  • Brug formellinjen øverst til avancerede formler.
  • Skift til Avancerede egenskaber for at få en detaljeret tilpasning.

Størrelse og placering

X – afstanden mellem kontrolelementets venstre kant og den venstre kant af den overordnede objektbeholder (skærm, hvis der ikke er nogen overordnet objektbeholder).

Y – afstanden mellem kontrolelementets øverste kant og den øverste kant af den overordnede objektbeholder (skærm, hvis der ikke er nogen overordnet objektbeholder).

Width – afstanden mellem kontrolelementets venstre og højre kant. Standard er 96.

Height – afstanden mellem kontrolelementets øverste og nederste kant. Standard er 32.

Align – den vandrette justering af knapindholdet i kontrolelementet. Accepterer optællingsværdier Align : Align.Left, Align.Center, Align.Right, Align.Justify.

VerticalAlign – den lodrette justering af knapindholdet. Accepterer optællingsværdier VerticalAlign : VerticalAlign.Top, VerticalAlign.Middle, VerticalAlign.Bottom.

PaddingTop – afstanden mellem knapindholdet og kontrolelementets øverste kant.

PaddingBottom – Afstanden mellem knapindholdet og den nederste kant af kontrolelementet.

PaddingLeft – afstanden mellem knapindholdet og kontrolelementets venstre kant.

PaddingRight – afstanden mellem knapindholdet og højre kant af kontrolelementet.

Typografi og tema

Udseende – knappens visuelle typografi. Accepterer optællingsværdier ButtonAppearance :

BasePaletteColor – den grundfarve, der bruges af temaet til at generere kontrolelementets farvepalet. Skift denne egenskab for at anvende en anden temafarve på knappen.

Icon – navnet på Fluent-ikonet, der skal vises sammen med knapteksten (f.eks. "Add", "Save", "Delete"). Lad argumentet være tomt for en knap, der kun er tekst.

IconStyle – om ikonet gengives i kontur eller udfyldt typografi. Accepterer optællingsværdier IconStyle : IconStyle.Outline (standard) eller IconStyle.Filled.

IconRotation – rotation i grader anvendt på ikonet. Standard er 0.

Layout – ikonets placering i forhold til knapteksten. Accepterer optællingsværdier ButtonLayout :

Font – den skrifttypefamilie, der bruges til knapnavnet.

Size – skriftstørrelsen på knapnavnet i punkter.

Color – farven på teksten til knapnavnet.

FontWeight – knapnavnets vægt (tykkelse). Accepterer optællingsværdier: , , FontWeightFontWeight.Bold (standard), FontWeight.Semibold. FontWeight.NormalFontWeight.Lighter

Kursiv – om knapnavnet vises med kursiv.

Understregning – om en linje vises under knapnavnets tekst.

Gennemstreget – om en linje vises midt i knapnavnets tekst.

BorderColor – farven på kontrolelementets kant.

BorderStyle – typografien for kontrolelementets kant. Accepterer optællingsværdier BorderStyle : BorderStyle.Solid, BorderStyle.Dashed, BorderStyle.Dottedeller BorderStyle.None.

BorderThickness – tykkelsen af kontrolelementets kant i pixel.

RadiusTopLeft – hjørneradius for øverste venstre hjørne af kontrolelementet.

RadiusTopRight – hjørneradius for øverste højre hjørne af kontrolelementet.

RadiusBottomLeft – hjørneradius for nederste venstre hjørne af kontrolelementet.

RadiusBottomRight – hjørneradius for nederste højre hjørne af kontrolelementet.

Yderligere egenskaber

AccessibleLabel – Mærkat, der læses af skærmlæsere. Angiv en meningsfuld beskrivelse, når knapnavnet alene ikke er tilstrækkelig (f.eks. når du bruger en knap, der kun er et ikon).

Værktøjstip – forklarende tekst, der vises, når brugeren holder markøren over knappen.

ContentLanguage – visningssproget for kontrolelementindholdet, hvis det er forskelligt fra appsproget.

Eksempel:

I følgende YAML-eksempel vises en send-knap og en annulleringsknap med OnSelect-handlinger:

- 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

Almindelige knapmønstre

Her er typiske knapimplementeringer:

Navigationsknap:

OnSelect = Navigate(DetailsScreen, ScreenTransition.Fade)

Dataafsendelse:

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

Variabelopdatering:

OnSelect = Set(IsVisible, !IsVisible)

Bekræftelsesdialogboks:

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

Seneste opdateringer

Den opdaterede version af det moderne knapkontrolelement indeholder følgende forbedringer og ændringer af funktionsmåden.

Omdøbninger af egenskaber

Følgende egenskaber omdøbes. Opdater alle formler i din app, der refererer til de gamle egenskabsnavne.

Fjernede egenskaber

Fejlrettelser og forbedringer

• Opdaterede optællinger: Appearance, Layoutog IconStyle bruger nu indtastede Power Fx-enums (ButtonAppearance, ButtonLayout, IconStyle) i stedet for strengværdier, hvilket forbedrer IntelliSense og reducerer formelfejl.
• Understøttelse af værktøjstip: Ny Tooltip egenskab viser forklarende tekst, når der peges.
• Grænseforbedringer: Tilføjet BorderStyle og BorderThickness for mere præcis grænsekontrol. Fire hjørnespecifikke egenskaber erstatter BorderRadius uafhængigt hjørnekontrolelement.
• Fuld skrifttypekontrolelement: Skrifttypeegenskaber er nu i overensstemmelse med andre moderne kontrolelementer. Brug Font, Size, ColorItalic, Underlineog Strikethrough.

Se også

• Oversigt over moderne kontrolelementer
• Egenskaber for størrelse og placering