CommandBar Kontroll (förhandsversion)

En kontroll som används för att mata in kommandon.

Kommentar

Fullständig dokumentation och källkod finns i lagringsplatsen för GitHub-kodkomponenter.

CommandBar-kontroll.

Beskrivning

CommandBar är en yta där kommandona som används i fönstrets, panelens eller den överordnade regionens innehåll lagras ovanför.

Denna kodkomponent fungerar som adapter runt Fluent UI CommandBar-kontrollen för användning i arbetsyteappar och på anpassade sidor.

Egenskaper

Nyckelegenskaper

Egenskap Beskrivning
Items Åtgärdsobjekten som ska återges

Struktur för objekt

Varje enskilt objekt använder följande schema för att visualisera data i komponenten.

Name Beskrivning
ItemDisplayName Visningsnamnet för objektet i kommandofältet.
ItemKey Den tangent som ska användas för att ange vilket objekt som har markerats och när du lägger till underobjekt. Tangenterna måste vara unika.
ItemEnabled Ange som "falskt" om alternativet är inaktiverat.
ItemVisible Ange som "falskt" om alternativet inte visas.
ItemChecked Ange som sant om alternativet är markerat (till exempel delningsknappar i ett kommandofält).
ItemSplit Ange true om alternativet går att klicka på och använda som en utfällbar rullgardinsmeny.
ItemIconName Ikonen Fluent UI som ska användas (se Fluent UI-ikoner)
ItemIconColor Den färg som ikonen ska renderas i (t.ex. namngiven, rgb eller hexadecimalt värde).
ItemIconOnly Visa inte textetiketten – bara ikonen.
ItemOverflow Ange som sant för spillfunktion
ItemOverflow Återge alternativet i spillobjekten.
ItemFarItem Visa alternativet i gruppen för objekt längst bort i ett kommandofält.
ItemHeader Rendera objektet som en avsnittsrubrik. Om det finns objekt som har sitt ItemParentKey inställt på nyckeln för det här objektet läggs de till som semantiskt grupperade objekt under det här avsnittet.
ItemTopDivider Visa en avdelare längst upp i avsnittet.
ItemDivider Rendera objektet som en sektionsavdelare – eller, om objektet är en rubrik (ItemHeader = true), styr om en avdelare ska renderas längst ned i sektionen.
ItemParentKey Återge alternativet som underobjekt för ett annat alternativ.

Kommentar

  • ItemIconColor åsidosätter komponentens Theme-värde och ignorerar andra lägesfärger (t.ex. inaktiverad).
  • ItemHeader och ItemDivider måste vara inställda på true för att renderas som en avdelare. Om värdet är inställt på false förväntar det sig andra värden och visas tomt.

Exempel

Exempel på Power Fx-formel för grundläggande 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"
    }
)

Stilegenskaper

Egenskap Beskrivning
Theme Godkänner en JSON-sträng som genereras med Fluent UI temadesigner (windows.net). Om du lämnar det här tomt används standardtemat som definieras av Power Apps. Se tema för vägledning om hur du konfigurerar.
AccessibilityLabel Aria-etikett för skärmläsare

Händelseegenskaper

Egenskap Beskrivning
InputEvent En händelse som ska skickas till kontrollen. T.ex. SetFocus.

Funktionssätt

Stödjer SetFocus som en InputEvent.

Konfigurera beteendet "Vid val"

Använd formeln Switch() i komponentens OnSelect egenskap om du vill konfigurera specifika åtgärder för respektive objekt genom att hänvisa till kontrollens markerade ItemKey som växelvärde.

Ersätt false-värdena med lämpliga uttryck i Power Fx-språket.

  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
  )

Ange fokus på kontrollen

När en ny dialog visas och standardfokus ska vara på kontrollen, måste fokus ställas in uttryckligen.

För att göra anrop till indatahändelse kan du ställa in en kontextvariabel som är bunden till egenskapen Input Event till en sträng som börjar med SetFocus och följs av ett slumpmässigt element för att säkerställa att programmet upptäcker det som en förändring.

Exempel på Power Fx-formel:

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

Kontextvariabeln ctxResizableTextareaEvent skulle då bindas till egenskapen Input Event.

Begränsningar

Den här kodkomponenten kan endast användas i arbetsyteappar och anpassade sidor.

Se fler begränsningsanteckningar i komponentdesignutmaningar.

  • Uppdaterades senast