Ovládací prvok CommandBar (verzia Preview)

Článok
03/21/2023

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 CommandBar.

Description

CommandBar je povrch, ktorý obsahuje príkazy, ktoré pracujú s obsahom okna, panela alebo nadradenej oblasti, nad ktorou sa nachádza.

Tento komponent kódu poskytuje obal okolo ovládacieho prvku Fluent UI CommandBar na použitie v aplikáciách plátna a vlastných stránkach.

Vlastnosti

Vlastnosti kľúča

Vlastnosť	Description
`Items`	Akčné položky na vykreslenie

Štruktúra položky

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.
`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`	Nastavte na hodnotu pravda, ak je táto možnosť začiarknutá (napríklad rozdelené tlačidlá na paneli príkazov).
`ItemSplit`	Nastavte na hodnotu pravda, ak na možnosť možno kliknúť a použiť ju ako rozbaľovaciu ponuku.
`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.
`ItemOverflow`	Nastaviť na hodnotu pravda pre správanie pri pretečení.
`ItemOverflow`	Vykresliť možnosť v položkách pretečenia.
`ItemFarItem`	Vykresliť možnosť v skupine vzdialených položiek na paneli príkazov.
`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.

Príklad

Príklad vzorca Power Fx pre základné Items:

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add"
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit"
    },{
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete"
    },{
        ItemKey: "refresh",
        ItemDisplayName: "Refresh",
        ItemIconName: "refresh"
    },{
        ItemKey: "help",
        ItemDisplayName: "Help",
        ItemIconName: "help"
    }
)

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

Vlastnosti udalosti

Vlastnosť	Description
`InputEvent`	Udalosť, ktorá sa má odoslať ovládaciemu prvku. Napr. `SetFocus`.

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 'new' (e.g., Patch function) */
    "new", false,
    
    /* Action for 'edit' (e.g., Patch function) */
    "edit", false,
    
    /* Action for 'delete' (e.g., Remove function ) */
    "delete", false,
    
    /* Action for 'refresh' (e.g., Refresh function) */
    "refresh", false,
    
    /* Action for 'help' (e.g., email support with the Office 365 connector ) */
    "help", 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.

Ďalšie poznámky k obmedzeniam nájdete v časti výzvy pri návrhu súčastí.

Zdieľať cez