Zdieľať cez

Breadcrumb ovládanie

  • Článok

Ovládací prvok používaný na navigáciu.

Poznámka

Úplnú dokumentáciu a zdrojový kód nájdete v odkladacom priestore komponentov kódu GitHub.

Ovládanie strúhanky.

Description

Breadcrumb ovládacie prvky by sa mali používať ako navigačná pomôcka vo vašej aplikácii alebo na webe. Označujú umiestnenie aktuálnej stránky v rámci hierarchie a pomáhajú používateľovi pochopiť, kde sa nachádza vo vzťahu k zvyšku tejto hierarchie. Breadcrumb tiež poskytuje prístup jedným kliknutím k vyšším úrovniam tejto hierarchie.

Táto súčasť kódu poskytuje obal okolo ovládacieho prvku Fluent UI Breadcrumb na použitie v aplikáciách plátna a na vlastných stránkach.

Vlastnosti

Vlastnosti kľúča

Vlastnosť Description
SelectedKey Toto označuje zvolený kľúč. Toto sa aktualizuje prostredníctvom udalosti OnChange, keď používateľ interaguje s ovládacím prvkom.
Items Akčné položky na vykreslenie

Items vlastnosti

Každá položka používa na vizualizáciu údajov v komponente nasledujúcu schému.

Name Description
ItemDisplayName Zobrazovaný názov položky Breadcrumb
ItemKey Kľúč, ktorý sa má použiť na označenie vybratej položky a pri pridávaní vedľajších položiek. Kľúče musia byť jedinečné.
ItemClickable Nastavte na hodnotu nepravda v prípade, že sa na konkrétnu položku Breadcrumb nedá kliknúť.

Príklad vzorca Power Fx:

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

Vlastnosti štýlu

Name Description
Theme Akceptuje reťazec JSON, ktorý je vygenerovaný pomocou aplikácie Fluent UI Theme Designer (windows.net). Ak toto necháte prázdne, použije sa predvolený motív definovaný v Power Apps. Pokyny na konfiguráciu nájdete v časti nastavenie motívov.
AccessibilityLabel Označenie aria-label pre čítačky obrazovky
MaxDisplayedItems Maximálny počet prvkov Breadcrumb, ktoré sa zobrazia pred zjednotením. Ak je nula, vykreslia sa všetky prvky Breadcrumb.
OverflowIndex Voliteľný index, kde budú zbalené pretečené položky. Predvolene je nastavená na hodnotu nula.

Vlastnosti udalosti

Name Description
InputEvent Udalosť, ktorá sa má odoslať ovládaciemu prvku. Napr. SetFocus. Pozrite nižšie.

Správanie

Podporuje SetFocus ako InputEvent.

Konfigurácia správania „Pri výbere“

Pomocou vzorca Switch() vo vlastnosti OnSelect súčasti nakonfigurujte konkrétne akcie pre každú položku podľa vybratého ItemKey ovládacieho prvku ako hodnoty prepínača.

Nahraďte hodnoty false vhodnými výrazmi v jazyku Power Fx.

Pretože sa tento ovládací prvok používa na navigáciu, logickým krokom je použitie navigačných funkcií (ideálne na príslušnú obrazovku s načítanými súvisiacimi údajmi).

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

Nastavenie zamerania na ovládací prvok

Keď sa zobrazí nové dialógové okno a predvolené zameranie by malo byť na ovládacom prvku, bude potrebné explicitne nastaviť zameranie.

Ak chcete volať vstupnú udalosť, môžete nastaviť kontextovú premennú, ktorá je viazaná na vlastnosť Input Event, na reťazec, ktorý začína SetFocus a za ktorým nasleduje náhodný prvok, aby ste zabezpečili, že ju aplikácia zistí ako zmeniť.

Príklad vzorca Power Fx:

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

Kontextová premenná ctxResizableTextareaEvent by potom bola naviazaná na vlastnosť Input Event.

Obmedzenia

Tento komponent kódu je možné použiť iba v aplikáciách plátna a vlastných stránkach.