Ovládací prvok ContextMenu
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.
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
aItemDivider
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.