CommandBar controle (voorbeeld)

Een besturingselement dat wordt gebruikt om opdrachten in te voeren.

Notitie

Volledige documentatie en broncode vindt u in de GitHub-opslagplaats voor codeonderdelen.

Besturingselement CommandBar.

Omschrijving

CommandBar is een oppervlak dat opdrachten bevat voor het werken met de inhoud van het venster, het paneel of het bovenliggende gebied waarboven het zich bevindt.

Dit codeonderdeel biedt een laag om het besturingselement Fluent UI CommandBar heen voor gebruik in canvas-apps en aangepaste pagina's.

Eigenschappen

Belangrijke eigenschappen

Eigenschap Omschrijving
Items De actie-items die moeten worden weergegeven

Itemstructuur

Elk item gebruikt het onderstaande schema om gegevens in het onderdeel te visualiseren.

Name Omschrijving
ItemDisplayName De weergavenaam van het item op de opdrachtbalk.
ItemKey De toets die moet worden gebruikt om aan te geven welk item is geselecteerd en bij het toevoegen van subitems. De toetsen moeten uniek zijn.
ItemEnabled Stel in op false als de optie is uitgeschakeld.
ItemVisible Stel in op false als de optie niet zichtbaar is.
ItemChecked Stel in op true als de optie is ingeschakeld (bijvoorbeeld splitsknoppen op een opdrachtbalk).
ItemSplit Stel deze in op true als de optie aanklikbaar is en gebruikt kan worden als een uitschuivend vervolgkeuzemenu.
ItemIconName Het Fluent UI-pictogram dat moet worden gebruikt (zie Fluent UI-pictogrammen)
ItemIconColor De kleur waarin het pictogram moet worden weergegeven (bijvoorbeeld met naam, RGB- of hexwaarde).
ItemIconOnly Laat het tekstlabel niet zien - alleen het pictogram.
ItemOverflow Stel in op true voor overloopgedrag
ItemOverflow Geef de optie weer in de overloopitems.
ItemFarItem Geef de optie weer in de groep verre items van een opdrachtbalk.
ItemHeader Geef het item als een sectiekop weer. Als er items zijn waarvan ItemParentKey is ingesteld op de sleutel van dit item, worden ze toegevoegd als semantisch gegroepeerde items onder deze sectie.
ItemTopDivider Geef een scheidingslijn boven aan de sectie weer.
ItemDivider Geef het item weer als een sectiescheiding - of als het item een koptekst is (ItemHeader = true), bepaal dan of een scheidingslijn onder aan de sectie moet worden weergegeven.
ItemParentKey Geef de optie weer als subitem van een andere optie.

Notitie

  • ItemIconColor overschrijft de themawaarde van het onderdeel en negeert andere statuskleuren (bijvoorbeeld uitgeschakeld).
  • ItemHeader en ItemDivider moet worden ingesteld op true om als een deler te worden weergegeven. Als deze optie op false is ingesteld, verwacht het andere waarden en wordt er niets weergegeven.

Voorbeeld

Voorbeeld van een Power Fx-formule voor eenvoudige 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"
    }
)

Stijleigenschappen

Eigenschap Omschrijving
Theme Accepteert een JSON-tekenreeks die is gegenereerd met Ontwerper van Fluent UI Theme (windows.net). Als u dit leeg laat, wordt het standaardthema gebruikt dat door Power Apps is gedefinieerd. Zie Themagebruik voor richtlijnen voor configureren.
AccessibilityLabel Arialabel voor schermlezers

Eigenschappen van gebeurtenis

Eigenschap Omschrijving
InputEvent Een gebeurtenis om naar het besturingselement te verzenden Bijvoorbeeld SetFocus.

Gedrag

Ondersteunt SetFocus als een InputEvent.

"OnSelect"-gedrag configureren

Gebruik de formule Switch() in de eigenschap OnSelect van het onderdeel om specifieke acties voor elk item te configureren door te verwijzen naar de geselecteerde ItemKey van het besturingselement als de schakelwaarde.

Vervang de false-waarden met geschikte expressies in de Power Fx-taal.

  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
  )

De focus op het besturingselement instellen

Wanneer een nieuw dialoogvenster wordt weergegeven en de standaardfocus op het besturingselement moet komen te staan, moet de focus expliciet worden ingesteld.

Als u de input-gebeurtenis wilt aanroepen, kunt u een contextvariabele die aan de eigenschap Input Event is gebonden, instellen op een tekenreeks die begint met SetFocus en gevolgd door een willekeurig element om ervoor te zorgen dat de app het als een wijziging detecteert.

Voorbeeld van Power Fx-formule:

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

De contextvariabele ctxResizableTextareaEvent is dan gebonden aan de eigenschap InputEvent.

Beperkingen

Dit codeonderdeel kan alleen worden gebruikt in canvas-apps en aangepaste pagina's.

Zie meer beperkingsopmerkingen in de ontwerpuitdagingen voor onderdelen.

  • Last updated on