CommandBar Kontroll (förhandsversion)

Artikel
10/16/2024

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.

Description

CommandBar är en yta som innehåller kommandon som påverkar innehållet i det fönster, den panel eller det överordnade område som den finns ovanför.

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

Egenskaper

Nyckelegenskaper

Property	Description
`Items`	Åtgärdsobjekten som ska återges

Objektstruktur

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

Name	Description
`ItemDisplayName`	Visningsnamnet för kommandofält objekt.
`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 som sant om alternativet kan klickas på och användas som en nedrullningsad meny.
`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`	Återge alternativet i gruppen för fjärran objekt i ett kommandofält.
`ItemHeader`	Rendera objektet som en avsnittsrubrik. Om det finns objekt som har deras `ItemParentKey` angett som viktiga för objektet läggs de till som grupperade objekt enligt det här avsnittet.
`ItemTopDivider`	Återge en avgränsare längst i avsnittet.
`ItemDivider`	Återge objektet som en avsnittsavdelare – eller om objektet är en rubrik (ItemHeader = sant) kontrollerar du om en avgränsare ska återge längst ned i avsnittet.
`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 anges till true för att återges som en avdelare. Om värdet är falskt förväntar sig andra värden och renderar tomma.

Exempel

Exempel 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

Property	Description
`Theme`	Godkänner en JSON-sträng som genereras med Fluent UI temadesigner (windows.net). Om du lämnar detta tomt används standardstandarden 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

Property	Description
`InputEvent`	En händelse att skicka till kontrollen. T.ex. `SetFocus`.

Funktionssätt

Stödjer SetFocus som en InputEvent.

Konfigurera funktionen 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 behövs en explicit uppsättning fokus.

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 Power Fx formel:

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

Sammanhangsvariabeln ctxResizableTextareaEvent kan sedan vara bundna 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.

Dela via