Knapp moderne kontroll i lerretsapper

Knappens moderne kontroll gir et klikkbart element som utløser handlinger i en lerretsapp, og tilbyr fleksibel stil og omfattende samhandlingsfunksjoner.

Description

Knappens moderne kontroll gir et klikkbart element som utløser applogikk når det er valgt. Bruk den for skjemainnsendinger, navigasjon, bekreftelser og eventuell samhandling som krever brukerinndata. Kontrollen støtter ikon- og tekstkombinasjoner, full skriftstil og flere utseendestiler gjennom Fluent-tema. Nøkkelegenskaper for denne kontrollen er Tekst, Utseende og OnSelect.

Generelt

Tekst – etiketten som vises på knappen. Støtter tekst eller Power Fx-formel som evalueres til en streng. Bruk denne egenskapen til å angi eller endre knappeteksten.

Synlig – om kontrollen vises eller er skjult. Bruk en Power Fx-formel til å vise eller skjule knappen basert på apptilstand.

Virkemåte

OnSelect – Bruk OnSelect-egenskapen til å definere hva som skjer når knappen er valgt. Det er slik appen reagerer når brukeren velger knappen. Kontrollen er tilgjengelig: OnSelect utløser også når brukeren trykker enter eller mellomrom mens kontrollen har tastaturfokus.

DisplayMode – om kontrollen tillater brukerinndata (Rediger), viser bare data (visning) eller er deaktivert (deaktivert). Når deaktivert, er knappen visuelt nedtonet og OnSelect utløses ikke.

Komme i gang

Knapp moderne kontroll er en av de mest brukte kontrollene i Power Apps. I kjernen har en knapp to viktige elementer: teksten som brukerne ser ( tekstegenskapen ) og handlingen som skjer når den velges ( OnSelect-egenskapen ). Når du forstår dette grunnleggende, kan du opprette interaktive apper som svarer på brukerinndata.

Angi knappetekst

Hvis du vil endre hvilken tekst som vises på knappen, angir du tekstegenskapen :

• Skriv inn tekst direkte i Tekst-feltet i Egenskaper-ruten
• Bruke en formel: Text = "Click Me" eller Text = "Save " & TextInput1.Text

Gjøre knapper interaktive

Definer hva som skjer når brukere velger knappen ved hjelp av OnSelect-egenskapen :

1. Velg knappen i appen.
2. Finn OnSelect-egenskapen i Egenskaper-ruten.
3. Skriv inn Power Fx-formelen, for eksempel Navigate(NextScreen).

Konfigurer knappeegenskaper

Power Apps bruker en strømlinjeformet tilnærming til redigering av kontroller.

• Velg knappen på lerretet:
  • Bruk Egenskaper-ruten til høyre for å endre grunnleggende egenskaper.
  • Bruk formellinjen øverst for avanserte formler.
  • Bytt til avanserte egenskaper for detaljert tilpasning.

Størrelse og plassering

X – Avstand mellom venstre kant av kontrollen og venstre kant av den overordnede beholderen (skjerm hvis ingen overordnet beholder).

Y – Avstand mellom øvre kant av kontrollen og øvre kant av den overordnede beholderen (skjerm hvis ingen overordnet beholder).

Bredde – avstand mellom kontrollens venstre og høyre kant. Standard er 96.

Høyde – avstand mellom kontrollens øvre og nederste kant. Standard er 32.

Juster – den vannrette justeringen av knappeinnholdet i kontrollen. Godtar opplistingsverdierAlign: Align.Left, , Align.Center, Align.RightAlign.Justify.

VerticalAlign – den loddrette justeringen av knappeinnholdet. Godtar opplistingsverdierVerticalAlign: VerticalAlign.Top, , VerticalAlign.Middle. VerticalAlign.Bottom

PaddingTop – avstand mellom knappeinnholdet og den øverste kanten av kontrollen.

PaddingBottom – avstand mellom knappeinnholdet og nedre kant av kontrollen.

PaddingLeft – avstand mellom knappeinnholdet og venstre kant av kontrollen.

PaddingRight – avstand mellom knappeinnholdet og høyre kant av kontrollen.

Stil og tema

Utseende – den visuelle stilen på knappen. Godtar opplistingsverdier ButtonAppearance :

BasePaletteColor – basisfargen som brukes av temaet til å generere kontrollens fargepalett. Endre denne egenskapen for å bruke en annen temafarge på knappen.

Ikon – Fluent-ikonnavnet som skal vises sammen med knappeteksten (for eksempel "Add", , "Save""Delete"). La den stå tom for en knapp som bare er tekst.

IconStyle – om ikonet gjengis i disposisjon eller fylt stil. Godtar opplistingsverdier IconStyle : IconStyle.Outline (standard) eller IconStyle.Filled.

IconRotation – rotasjon i grader brukt på ikonet. Standard er 0.

Oppsett – plasseringen av ikonet i forhold til knappeteksten. Godtar opplistingsverdier ButtonLayout :

Skrift – skriftfamilien som brukes for knappeetiketten.

Størrelse – skriftstørrelsen på knappeetiketten, i punkter.

Farge – fargen på knappeetikettteksten.

FontWeight – tykkelsen på knappeetiketten. Godtar opplistingsverdier: , , FontWeightFontWeight.Bold (standard), FontWeight.Semibold. FontWeight.NormalFontWeight.Lighter

Kursiv – om knappeetiketten vises i kursiv stil.

Understreking – om en linje vises under knappeetikettteksten.

Gjennomstreking – om en linje vises midt i knappeetikettteksten.

BorderColor – fargen på kontrollens kantlinje.

BorderStyle – stilen på kontrollens kantlinje. Godtar opplistingsverdier BorderStyle : BorderStyle.Solid, BorderStyle.Dashed, BorderStyle.Dottedeller BorderStyle.None.

BorderThickness – tykkelsen på kontrollens kantlinje i piksler.

RadiusTopLeft – hjørneradiusen for øverste venstre hjørne av kontrollen.

RadiusTopRight – hjørneradiusen øverst til høyre i kontrollen.

RadiusBottomLeft – hjørneradiusen for nedre venstre hjørne av kontrollen.

RadiusBottomRight – hjørneradiusen for nedre høyre hjørne av kontrollen.

Tilleggsegenskaper

AccessibleLabel – Etikett lest av skjermlesere. Angi en meningsfull beskrivelse når knappeetiketten alene ikke er tilstrekkelig (for eksempel når du bruker en knapp som bare bruker ikon).

Verktøytips – Forklarende tekst som vises når brukeren holder pekeren over knappen.

ContentLanguage – visningsspråket for kontrollinnholdet, hvis det er forskjellig fra appspråket.

Eksempel

Følgende YAML-eksempel viser en send-knapp og en avbryt-knapp 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

Vanlige knappemønstre

Her er vanlige knappimplementeringer:

Navigasjonsknapp:

OnSelect = Navigate(DetailsScreen, ScreenTransition.Fade)

Datainnsending:

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

Variabel oppdatering:

OnSelect = Set(IsVisible, !IsVisible)

Bekreftelsesdialogboksen:

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

Nylige oppdateringer

Den oppdaterte versjonen av knappens moderne kontroll inkluderer følgende forbedringer og endringer i virkemåten.

Omdøping av egenskaper

Følgende egenskaper har fått nytt navn. Oppdater formler i appen som refererer til de gamle egenskapsnavnene.

Fjernet egenskaper

Feilrettinger og forbedringer

• Oppdaterte opplistinger: Appearance, Layoutog IconStyle bruker nå skrevne Power Fx-opplistinger (ButtonAppearance, ButtonLayout, IconStyle) i stedet for strengverdier, forbedring av IntelliSense og reduksjon av formelfeil.
• Støtte for verktøytips: Ny Tooltip egenskap viser forklarende tekst ved pekerfølsom.
• Kantlinjeforbedringer: Lagt til BorderStyle og BorderThickness for mer presis kantlinjekontroll. Fire hjørnespesifikke egenskaper erstattes BorderRadius for uavhengig hjørnekontroll.
• Full skriftkontroll: Skriftegenskaper samsvarer nå med andre moderne kontroller. Bruk Font, Size, Color, Italic, Underlineog Strikethrough.

Se også

• Oversikt over moderne kontroller
• Egenskaper for størrelse og plassering