Zdieľať cez


Ovládací prvok Nav

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 navigácie.

Description

Navigačná tabla (Nav) poskytuje prepojenia na hlavné oblasti aplikácie alebo lokality.

Komponent kódu Nav umožňuje používať komponent ponuky Fluent UINav vnútri aplikácií plátna a vlastných stránok.

Poznámka

Zdrojový kód komponentu a ďalšie informácie nájdete v odkladacom priestore komponentov kódu GitHub.

Vlastnosti

Vlastnosti kľúča

Vlastnosť Description
Selected key Kľúč, ktorý sa má vybrať. Toto sa aktualizuje prostredníctvom udalosti OnChange, keď používateľ interaguje s ovládacím prvkom.
Items Povinné. Tabuľka položiek zdroj údajov na vykreslenie.
Fields Povinné. Polia, ktoré sú zahrnuté z množiny údajov.

Vlastnosti Items

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

Name Description
ItemDisplayName Zobrazovaný názov položky panela príkazov/karty/ponuky
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é.
ItemEnabled Ak je táto možnosť zakázaná, nastavte ju na hodnotu nepravda
ItemVisible Ak táto možnosť nie je viditeľná, nastavte ju na hodnotu nepravda
ItemIconName Ikona Fluent UI, ktorú chcete použiť (pozrite si Ikony Fluent UI)
ItemIconColor Farba, ktorou sa má ikona vykresliť (napr. pomenovaná, rgb alebo hexadecimálna hodnota)
ItemIconOnly Nezobrazovať textové značenie – iba ikonu
ItemParentKey Vykresliť možnosť ako podradenú položku inej možnosti
ItemExpanded Nastavte na hodnotu false alebo true, ak má skupina zostať zbalená alebo rozbalená.

Príklad:

Table(
  {
      ItemKey: "1",
      ItemDisplayName: "Home with Icon & Custom color",
      ItemIconName: "Home",
      ItemIconColor: "Green"
  },
  {
      ItemKey: "2",
      ItemDisplayName: "Documents",
      ItemExpanded: true
  },
  {
      ItemKey: "3",
      ItemDisplayName: "Contents"
  },
  {
      ItemKey: "4",
      ItemDisplayName: "Item Invisible",
      ItemVisible: false
  },
  {
      ItemKey: "5",
      ItemDisplayName: "Quick Reference Guide",
      ItemParentKey: "3",
      ItemIconName: "Document"
  }
)

Vlastnosti štýlu

Vlastnosť 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
CollapseByDefault Nastavte na hodnotu True or False(On or Off) pre všetky skupiny Nav, ak má skupina zostať zbalená alebo rozbalená. Vlastnosť rozšírenia na úrovni jednotlivých položiek sa rešpektuje.

Vlastnosti udalosti

Vlastnosť 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.

  Switch( Self.Selected.ItemKey,

    /* Action for ItemKey 1 */
    "1", false,

    /* Action for ItemKey 2 */
    "2", false,

    /* Action for ItemKey 3 */
    "3", false,

    /* Action for ItemKey 4 */
    "4", false,

    /* Action for ItemKey 5 */
    "5", 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ť.

Napr.

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.