Delen via

ContextMenu controle

  • Artikel

Een besturingselement dat wordt gebruikt om opdrachten in te voeren.

Notitie

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

Besturingselement ContextMenu.

Omschrijving

Een contextmenu (ContextMenu) is een lijst met opdrachten die zijn gebaseerd op de context van selectie, muisaanwijzer of toetsenbordfocus. Ze zijn een van de meest effectieve en meest gebruikte opdrachtoppervlakken en kunnen op verschillende plaatsen worden gebruikt.

Dit codeonderdeel biedt een wrapper rond het Fluent UI-besturingselement ContextualMenu dat is gebonden aan een knop voor gebruik in canvas-apps en aangepaste pagina's.

Eigenschappen

Belangrijke eigenschappen

Eigenschappen Omschrijving
Items De actie-items die moeten worden weergegeven. Het eerste item wordt beschouwd als het hoofditem.

Items Eigenschappen

Name Omschrijving
ItemDisplayName De weergavenaam van het menu-item.
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 Ingesteld in op true als de optie is geselecteerd.
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.
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 onderliggend item van een andere optie.

Notitie

  • ItemIconColor overschrijft de themawaarde van het component en negeert andere statuskleuren (bijvoorbeeld uitgeschakeld).
  • ItemHeader en ItemDivider moet op true worden ingesteld om als een verdeler te worden weergegeven. Als dit is ingesteld op false, worden andere waarden verwacht en wordt deze leeg weergegeven.
  • Door de ItemChecked-eigenschap en het gedrag van submenu-items toe te voegen, wordt voorkomen dat het submenu bij klikken wordt gesloten.

Voorbeeld

Voorbeeld van Power Fx-formule voor Items:

  Table(
      {
          ItemKey: "File",
          ItemIconName: "save",
          ItemDisplayName: "Save",
          ItemOverflow:true
      },
       {
          ItemKey: "Delete",
          ItemIconName: "Delete",
          ItemDisplayName: "Delete",
          ItemOverflow:true
      }
  )

Stijleigenschappen

Eigenschappen 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. Als u dit leeg laat, wordt het standaardthema gebruikt dat door Power Apps is gedefinieerd. Zie Themagebruik voor richtlijnen voor configureren.
Chevron Toon of verberg de punthaak naar beneden op de hoofdknop
IconColor Optioneel. De kleur van het pictogram op de contextmenuknop.
HoverIconColor Optioneel. De kleur van het pictogram wanneer de contextmenuknop wordt aangewezen.
IconSize Optioneel. In pixels de grootte van het pictogram op de contextmenuknop.
FontSize Optioneel. In pixels de grootte van de tekst op de contextmenuknop.
FontColor Optioneel. De kleur van de tekst op de contextmenuknop.
HoverFontColor Optioneel. De kleur van de tekst wanneer de contextmenuknop wordt aangewezen.
FillColor Optioneel. De achtergrondkleur van de contextmenuknop.
HoverFillColor Optioneel. De achtergrondkleur wanneer de contextmenuknop wordt aangewezen.
TextAlignment De uitlijning van de knoptekst. Mogelijke waarden: Midden, Links of Rechts
AccessibilityLabel Arialabel voor schermlezers

Eigenschappen van gebeurtenis

Eigenschappen Omschrijving
InputEvent Een gebeurtenis waarnaar het besturingselement moet worden verzonden Bijvoorbeeld SetFocus. Zie hieronder.

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 1 */
    "File", false,
    
    /* Action for ItemKey 2 */
    "Delete", false,
  
    /* Default action */
        false
  )

Focus op het besturingselement instellen

Wanneer een nieuw dialoogvenster wordt weergegeven en de standaardfocus op het besturingselement moet liggen, is een expliciete ingestelde focus nodig.

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.

Bijvoorbeeld:

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

De contextvariabele ctxResizableTextareaEvent is dan gebonden aan de eigenschap Input Event.

Beperkingen

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