Compartir a través de

Control ContextMenu

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.

Control ContextMenu.

Descripción

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.

Propiedades Items

Nombre 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 elemento 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 deben establecerse en verdadero para que se represente como un 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 de menú contextual.
FontSize Opcional. En píxeles, el tamaño del texto en el botón de 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.

  • Last updated on