Zdieľať cez

Ovládací prvok ContextMenu

  • Článok

Ovládací prvok používaný na zadávanie príkazov.

Poznámka

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

Ovládanie kontextovej ponuky.

Description

Kontextová ponuka (ContextMenu) je zoznam príkazov, ktoré sú založené na kontexte výberu, umiestnení kurzora myši alebo zamerania klávesnice. Sú jedným z najefektívnejších a najpoužívanejších príkazových plôch a dajú sa použiť na rôznych miestach.

Táto súčasť kódu poskytuje obal okolo ovládacieho prvku Fluent UI ContextMenu previazaný s tlačidlom na použite na stránkach plátna a vlastných stránkach.

Vlastnosti

Kľúčové vlastnosti

Vlastnosť Description
Items Akčné položky na vykreslenie. Prvá položka sa považuje za koreňovú položku.

Vlastnosti Items

Name Description
ItemDisplayName Zobrazovaný názov položky v menu.
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.
ItemChecked Ak je táto možnosť začiarknutá, nastavte ju na hodnotu pravda.
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.
ItemHeader Vykresliť položku ako hlavičku sekcie. Ak existujú položky, ktoré majú svoj ItemParentKey nastavený na kľúč tejto položky, potom sa pridajú ako sémanticky zoskupené položky v tejto sekcii.
ItemTopDivider Vykresliť oddeľovač v hornej časti sekcie.
ItemDivider Vykresliť položku ako oddeľovač sekcie – alebo ak je položka hlavičkou (ItemHeader = pravda), potom určuje, či sa má vykresliť oddeľovač v spodnej časti sekcie.
ItemParentKey Vykresliť možnosť ako podradenú položku inej možnosti.

Poznámka

  • ItemIconColor prepíše hodnotu Theme súčasti a bude ignorovať ostatné farby stavu (napr. zakázané).
  • ItemHeader a ItemDivider musí byť nastavené na pravda, aby sa vykreslilo ako oddeľovač. Ak je nastavená na hodnotu nepravda, očakáva iné hodnoty a vykreslí sa ako prázdna.
  • Pridaním vlastnosti ItemChecked vlastnosti a správania sa položiek podponuky zabráni zatvoreniu podponuky po kliknutí.

Príklad

Príklad vzorca Power Fx pre Items:

  Table(
      {
          ItemKey: "File",
          ItemIconName: "save",
          ItemDisplayName: "Save",
          ItemOverflow:true
      },
       {
          ItemKey: "Delete",
          ItemIconName: "Delete",
          ItemDisplayName: "Delete",
          ItemOverflow:true
      }
  )

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. 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.
Chevron Zobraziť alebo skryť dvojitú šípku dole na koreňovom tlačidle
IconColor Voliteľné. farba ikony na tlačidle kontextovej ponuky.
HoverIconColor Voliteľné. farba ikony pri ukázaní na tlačidlo kontextovej ponuky.
IconSize Voliteľné. V pixeloch; veľkosť ikony na tlačidle kontextovej ponuky.
FontSize Voliteľné. V pixeloch; veľkosť textu na tlačidle kontextovej ponuky.
FontColor Voliteľné. farba textu na tlačidle kontextovej ponuky.
HoverFontColor Voliteľné. farba textu pri ukázaní na tlačidlo kontextovej ponuky.
FillColor Voliteľné. farba pozadia na tlačidle kontextovej ponuky.
HoverFillColor Voliteľné. farba pozadia pri ukázaní na tlačidlo kontextovej ponuky.
TextAlignment Zarovnanie textu tlačidla. Možné hodnoty: Stred, Vľavo alebo Vpravo
AccessibilityLabel Označenie aria-label pre čítačky obrazovky

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 */
    "File", false,
    
    /* Action for ItemKey 2 */
    "Delete", 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.