Del via

Breadcrumb kontroll

  • Artikkel

En kontroll som brukes til å gi navigasjon.

Merk

Full dokumentasjons- og kildekode funnet i GitHub-kodekomponentrepositoriet.

Breadcrumb-kontroll.

Bekrivelse

Breadcrumb Kontroller bør brukes som navigasjonshjelpemiddel i appen eller på nettstedet ditt. De angir plasseringen til den nåværende siden i et hierarki og hjelper brukeren med å forstå hvor de er i forhold til resten av hierarkiet. En breadcrumb gir også tilgang til høyere nivåer av hierarkiet med ett klikk.

Denne kodekomponenten gir en wrapper rundt Fluent UI Breadcrumb-kontrollen for bruk i lerretsapper og på egendefinerte sider.

Egenskaper

Nøkkelegenskaper

Egenskap Bekrivelse
SelectedKey Dette angir den valgte nøkkelen. Dette oppdateres via OnChange-hendelsen når brukeren samhandler med kontrollen.
Items Handlingselementene som skal gjengis

Items Egenskaper

Hvert element bruker følgende skjema til å visualisere data i komponenten.

Name Bekrivelse
ItemDisplayName Visningsnavnet på søkebaneelementet
ItemKey Nøkkelen som skal brukes for å angi hvilket element som er valgt, og når du legger til underordnede elementer. Nøklene må være unikt.
ItemClickable Sett til usann i tilfelle det bestemte søkebaneelementet ikke kan klikkes.

Eksempel på Power Fx-formel:

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "General",
        ItemClickable: true
    },
    {
        ItemKey: "2",
        ItemDisplayName: "Document",
        ItemClickable: true
    }
)

Stilegenskaper

Name Bekrivelse
Theme Godtar en JSON-streng som genereres ved hjelp av Fluent UI Theme Designer (windows.net). Hvis du lar dette stå tomt, bruker du standardtemaet definert av Power Apps. Se Bruk av tema for hjelp til å konfigurere.
AccessibilityLabel Skjermleser aria-etikett
MaxDisplayedItems Maksimalt antall søkebaner som kan vises før coalescing. Hvis null, gjengis alle brødsmulene.
OverflowIndex Valgfri indeks der overflytelementer skjules. Som standard settes den til null.

Hendelsesegenskaper

Name Bekrivelse
InputEvent En hendelse for å sende kontrollen. For eksempel SetFocus. Se nedenfor.

Virkemåte

Støtter SetFocus som en InputEvent.

Konfigurere virkemåten Ved valg

Bruk Switch()-formelen i komponentens OnSelect-egenskap til å konfigurere bestemte handlinger for hvert element ved å henvise til kontrollens valgte ItemKey som bryterverdi.

Bytt ut false-verdiene med riktige uttrykk i Power Fx-språket.

Fordi denne kontrollen brukes til navigasjon, er en logisk handling å bruke navigasjonsfunksjoner (ideelt sett til en relevant skjerm med de relaterte dataene lastet inn).

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "1", false,
    
    /* Action for ItemKey 2 */
    "2", false,
  
    /* Default action */
        false
  )

Angi fokus på kontrollen

Når en ny dialogboks vises og standardfokuset skal være på kontrollen, er det nødvendig med et eksplisitt angitt fokus.

Hvis du vil utføre kall til inndatahendelsen, kan du angi en kontekstvariabel som er bundet til egenskapen Inndatahendelse , til en streng som starter med SetFocus og etterfulgt av et vilkårlig element, for å sikre at appen registrerer den som en endring.

Eksempel på Power Fx-formel:

UpdateContext({ ctxResizableTextareaEvent:"SetFocus" & Text(Rand()) }));

Kontekstvariabelen ctxResizableTextareaEvent kan deretter være bundet til Input Event-egenskapen.

Begrensninger

Denne kodekomponenten kan bare brukes i lerretsapper og egendefinerte sider.