Comparteix a través de


Control ContextMenu

Control utilitzat per introduir ordres.

Nota

Trobareu la documentació completa i el codi font al dipòsit de components de codi de GitHub.

Control ContextMenu.

Descripció

Un menú contextual (ContextMenu) és una llista d'ordres basada en el context de la selecció, el punter del ratolí o el focus del teclat. Són una de les superfícies ordre més efectives i utilitzades, i es poden utilitzar en diversos llocs.

Aquest component de codi proporciona un embolcall al voltant del control ContextualMenu de Fluent UI vinculat a un botó per utilitzar-lo a les aplicacions de llenç i les pàgines personalitzades.

Propietats

Propietats de la clau

Propietat Descripció
Items Els elements d'acció que s'han de representar. El primer element es considera l'element arrel.

Propietats d'Items

Nom Descripció
ItemDisplayName Nom de visualització de l'element de menú.
ItemKey La clau que s'utilitza per indicar quin element se selecciona i quan s'afegeixen subelements. Les claus han de ser úniques.
ItemEnabled Es defineix com a fals si l'opció està inhabilitada.
ItemVisible Es defineix com a fals si l'opció no és visible.
ItemChecked Es defineix com a true si l'opció està marcada.
ItemIconName Icona de Fluent UI que s'utilitzarà (vegeu Icones de Fluent UI)
ItemIconColor El color per representar la icona (per exemple, valor de nom, rgb o hexadecimal).
ItemIconOnly No es mostra l'etiqueta del text, només la icona.
ItemHeader Es representa l'element com a capçalera de secció. Si hi ha elements que tenen el seu ItemParentKey establert en la clau d'aquest element, s'afegiran com a elements agrupats semànticament en aquesta secció.
ItemTopDivider Es representa un divisor a la part superior de la secció.
ItemDivider Representa l'element com un divisor de secció, o si l'element és una capçalera (ItemHeader = true), controla si es mostra un divisor a la part inferior de la secció.
ItemParentKey Es representa l'opció com a element secundari d'una altra opció.

Nota

  • ItemIconColor substituirà el valor del tema del component i ignorarà altres colors d'estat (per exemple, inhabilitat).
  • ItemHeader i ItemDivider s'han d'establir en cert per representar com a divisor. Si es defineix com a fals, espera altres valors i es representarà en blanc.
  • Si afegiu la propietat i el comportament dels elements del submenú, evitareu que el ItemChecked submenú es tanqui en fer clic.

Exemple

Fórmula del Power Fx d'exemple per a Items:

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

Propietats d'estil

Propietat Descripció
Theme Accepta una cadena JSON generada mitjançant el Fluent UI Theme Designer (windows.net). Deixant aquest camp en blanc s'utilitzarà el tema per defecte definit per Power Apps. Deixant aquest camp en blanc s'utilitzarà el tema per defecte definit per Power Apps. Per obtenir ajuda sobre com s'ha de configurar, vegeu temes.
Chevron Mostra o amaga les cometes angulars cap avall al botó arrel
IconColor Opcional. color de la icona al botó del menú contextual.
HoverIconColor Opcional. color de la icona quan es passa el ratolí pel botó del menú contextual.
IconSize Opcional. En píxels, la mida de la icona al botó del menú contextual.
FontSize Opcional. En píxels, la mida del text al botó del menú contextual.
FontColor Opcional. color del text al botó del menú contextual.
HoverFontColor Opcional. color del text quan es passa el ratolí pel botó del menú contextual.
FillColor Opcional. color de fons del botó del menú contextual.
HoverFillColor Opcional. color de fons quan es passa el ratolí pel botó del menú contextual.
TextAlignment Alineació del text del botó. Valors possibles: Centre, Esquerra o Dreta
AccessibilityLabel Etiqueta aria de lector de pantalla

Propietats de la incidència

Propietat Descripció
InputEvent Una incidència que s'enviarà al control. Per exemple, SetFocus. Vegeu sota.

Comportament

Admet SetFocus com un InputEvent.

Configurar el comportament en seleccionar

Utilitzeu la fórmula Commuta () a la propietat OnSelect del component per configurar accions específiques per a cada element fent referència a l'estat seleccionat del control ItemKey com a valor de commutació.

Substituïu els valors false per expressions adequades en el llenguatge Power Fx.

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "File", false,
    
    /* Action for ItemKey 2 */
    "Delete", false,
  
    /* Default action */
        false
  )

Establir el focus al control

Quan es mostra un diàleg nou i l'enfocament per defecte hauria d'estar al control, es necessitarà un enfocament definit explícit.

Per fer crides a la incidència d'entrada, podeu definir una variable de context enllaçada amb la propietat Incidència d'entrada a una cadena que comença amb SetFocus i va seguida d'un element aleatori per assegurar-vos que l'aplicació la detecta com un canvi.

Per exemple,

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

La variable de context ctxResizableTextareaEvent s'enllaçarà amb la propietat Input Event.

Limitacions

Aquest codi del llenç només es pot utilitzar a les aplicacions del llenç i a les pàgines personalitzades.