Jaa

Breadcrumb hallinta

  • Artikkeli

Siirtymisen mahdollistava ohjausobjekti.

Muistiinpano

Täydellinen dokumentaatio ja lähdekoodi löytyvät koodikomponenttien GitHub-säilöstä.

Breadcrumb-ohjausobjekti

Description

Breadcrumb Ohjausobjekteja tulisi käyttää siirtymisen apuna sovelluksessa tai sivustossa. Ne ilmaisevat nykyisen sivun sijainnin hierarkiassa ja auttavat käyttäjää hahmottamaan sijaintinsa suhteessa muuhun hierarkiaan. Linkkipolku antaa myös mahdollisuuden käyttää kyseisen hierarkian ylempiä tasoja yhdellä napsautuksella.

Tämä koodikomponentti paketoi Fluent UI:n Breadcrumb -ohjausobjektin, jota käytetään pohjaan perustuvissa sovelluksissa ja mukautetuilla sivuilla.

Ominaisuudet

Tärkeimmät ominaisuudet

Ominaisuus Description
SelectedKey Tämä osoittaa valitun avaimen. Tämä päivitetään OnChange-tapahtuman kautta, kun käyttäjä vuorovaikuttaa ohjausobjektin kanssa.
Items Hahmonnevat toimintokohteet

Items Majoituspaikkaa

Kukin kohde visualisoi komponentin tiedot seuraavan rakenteen avulla.

Name Description
ItemDisplayName Navigointipolun kohteen näyttönimi
ItemKey Avaimen avulla ilmaistaan, mikä kohde valitaan ja milloin lisätään alikohteita. Avaimien on oltava yksilöiviä.
ItemClickable Määritä arvoksi false, jos määritettyä navigointipolun kohdetta ei voi napsauttaa.

Esimerkki Power Fx -kaavasta:

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

Tyylin ominaisuudet

Name Description
Theme Hyväksyy Fluent UI Theme Designer (windows.net) -sovelluksella luodun JSON-merkkijonon. Tämän kentän jättäminen tyhjäksi käyttää Power Appsin määrittämää oletusteemaa. Katso määritysohjeet kohdasta Teemat.
AccessibilityLabel Näytönlukuohjelman aria-otsikko
MaxDisplayedItems Enimmäismäärä näytettäviä navigointipolkuja ennen tiivistämistä. Jos arvo on nolla, kaikki navigointipolut hahmonnetaan.
OverflowIndex Valinnainen indeksi, jonka kohdalla ylivuodon kohteet tiivistetään Oletusarvo on nolla.

Tapahtuman ominaisuudet

Nimi Kuvaus
InputEvent Ohjausobjektiin lähetettävä tapahtuma. Esimerkiksi SetFocus. Lisätietoja alla.

Toiminta

Tukee SetFocus-tapahtumaa InputEvent-tapahtumana.

Muutoksen yhteydessä -toiminnan määrittäminen

Switch()-kaavan käyttäminen komponentin OnSelect-ominaisuudessa määrittää kunkin kohteen toiminnot viittaamalla ohjausobjektin valittuun ItemKey-ominaisuuteen kytkimen arvona.

Korvaa false-arvot sopivilla Power Fx -kielen lausekkeilla.

Koska ohjausobjektia käytetään siirtymisessä, looginen toiminto on käyttää siirtymistoimintoja (ihanteellisesti sopivaan näyttöön, johon liittyvät tiedot on ladattu).

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

Kohdistuksen asettaminen ohjausobjektiin

Kun uusi valintaikkuna tulee näkyviin ja kohdistuksen tulisi olla oletusarvoisesti ohjausobjektissa, kohdistus täytyy määrittää erikseen.

Jos haluat tehdä kutsuja syötetapahtumaan, voit asettaa Input Event -ominaisuuteen sidotun kontekstimuuttujan merkkijonoksi, joka alkaa SetFocus ja jatkuu satunnaisella elementillä, jotta sovellus havaitsee sen varmasti muutoksena.

Esimerkki Power Fx -kaavasta:

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

Tämän jälkeen kontekstimuuttuja ctxResizableTextareaEvent sidottaisiin Input Event -ominaisuuteen.

Rajoitukset

Tätä koodikomponenttia voidaan käyttää vain pohjaan perustuvissa sovelluksissa ja mukautetuilla sivuilla.