ContextMenu control

Un control usado para ingresar comandos.

Nota

La documentación completa y el código fuente se encuentran en el repositorio de componentes de código GitHub.

Description

Un menú contextual (ContextMenu) es una lista de comandos que se basan en el contexto de selección, el desplazamiento del ratón o el enfoque del teclado. Son una de las superficies de comando más efectivas y utilizadas, y se pueden usar en varios lugares.

Este componente de código proporciona un envoltorio alrededor del control ContextualMenu de Fluent UI vinculado a un botón para su uso en aplicaciones de lienzo y páginas personalizadas.

Propiedades

Propiedades importantes

Property	Descripción
Items	Los elementos de acción para renderizar. El primer elemento se considera el elemento raíz.

Items Propiedades

Name	Descripción
ItemDisplayName	El nombre para mostrar del elemento de menú.
ItemKey	La tecla que se debe utilizar al indicar qué elemento está seleccionado y al agregar subelementos. Las teclas deben ser únicas.
ItemEnabled	Se establece en falso si la opción está deshabilitada.
ItemVisible	Se establece en falso si la opción no está visible.
ItemChecked	Establezca este valor en verdadero si la opción está activada.
ItemIconName	El icono de Fluent UI que se debe usar (ver Iconos de Fluent UI)
ItemIconColor	El color para representar el icono (p. ej., con nombre, rgb o un valor hexadecimal).
ItemIconOnly	No mostrar la etiqueta de texto, solo el icono.
ItemHeader	Representa el eleemnto como encabezado de sección. Si hay elementos que tienen su ItemParentKey configurado en la clave de este elemento, se agregan como elementos agrupados semánticamente en esta sección.
ItemTopDivider	Representa un divisor en la parte superior de la sección.
ItemDivider	Representa el elemento como un divisor de sección, o si el elemento es un encabezado (ItemHeader = true), luego controla si mostrar un divisor en la parte inferior de la sección.
ItemParentKey	Representa la opción como elemento secundario de otra opción.

Nota

• ItemIconColor anulará el valor del tema del componente e ignorará otros colores de estado (por ejemplo, deshabilitado).
• ItemHeader y ItemDivider debe establecerse en verdadero para representarse como divisor. Si se establece en falso, espera otros valores y se quedará en blanco.
• Agregar la propiedad ItemChecked y el comportamiento de los elementos del submenú evitará que el submenú se cierre al hacer clic.

Ejemplo

Fórmula de Power Fx de ejemplo para Items:

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

Propiedades de estilo

Property	Descripción
Theme	Acepta una cadena JSON que se genera usando Diseñador de temas de Fluent UI (windows.net). Si deja esto en blanco, usará el tema predeterminado definido por Power Apps. Si deja esto en blanco, usará el tema predeterminado definido por Power Apps. Para obtener ayuda sobre cómo configurarlo vea Tematización.
Chevron	Mostrar u ocultar el cheurón hacia abajo en el botón raíz
IconColor	Opcional. color del icono en el botón de menú contextual.
HoverIconColor	Opcional. color del icono cuando se pasa el ratón por el botón de menú contextual.
IconSize	Opcional. En píxeles, el tamaño del icono en el botón del menú contextual.
FontSize	Opcional. En píxeles, el tamaño del texto en el botón del menú contextual.
FontColor	Opcional. el color del texto en el botón de menú contextual.
HoverFontColor	Opcional. el color del texto cuando se pasa el ratón por el botón de menú contextual.
FillColor	Opcional. el color de fondo del botón de menú contextual.
HoverFillColor	Opcional. el color de fondo cuando se pasa el ratón por el botón de menú contextual.
TextAlignment	La alineación del texto del botón. Valores posibles: Centro, Izquierda o Derecha
AccessibilityLabel	aria-label para lectores de pantalla

Propiedades de evento

Property	Descripción
InputEvent	Evento para enviar al control. por ejemplo, SetFocus. Consulte a continuación.

Behavior

Soporta SetFocus como un InputEvent.

Configure el comportamiento "Al seleccionar"

Use la fórmula Cambiar() en la propiedad OnSelect del componente para configurar acciones específicas para cada elemento haciendo referencia al ItemKey seleccionado del control como el valor del interruptor.

Cambie los valores false con expresiones adecuadas en el lenguaje Power Fx.

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

Establecer el foco en el control

Cuando se muestra un nuevo cuadro de diálogo y el enfoque predeterminado debe estar en el control, se necesitará un enfoque establecido explícito.

Para realizar llamadas al evento de entrada, puede establecer una variable de contexto vinculada a la propiedad Evento de entrada en una cadena que comience con SetFocus seguido de un elemento aleatorio para garantizar que la aplicación lo detecte como un cambio.

Por ejemplo,

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

La variable de contexto ctxResizableTextareaEvent entonces se vincularía a la propiedad Input Event.

Limitaciones

Este componente de código solo se puede usar en aplicaciones de lienzo y páginas personalizadas.