Menú contextual

Un menú contextual es una lista de opciones que se abre con un clic derecho (o con la tecla de menú del teclado) sobre el componente que lo declara. Sus opciones son elementos context-button, con los mismos atributos que un botón y las mismas acciones; un context-separator dibuja una línea entre grupos y un context-button dentro de otro forma un submenú. Pueden declararlo los botones, las tablas, las tablas en árbol, los gráficos, las pestañas y los asistentes. Aquí el componente es un botón: haz clic derecho sobre él, elige una opción y el campo de solo lectura muestra cuál se ejecutó.

Vista previa en vivo

ClaroOscuro

Controles

Etiqueta del botón

Se abre con

Clic derechoClic izquierdo

Iconos

Submenú Exportar

Separador antes de Eliminar

XML

<button id="demo" label="Customer actions">
  <context-button id="Edit" label="Edit" icon="lucide:pencil">
    <button-action type="value" target="LastAction" value="Edit" />
  </context-button>
  <context-button id="Duplicate" label="Duplicate" icon="lucide:copy">
    <button-action type="value" target="LastAction" value="Duplicate" />
  </context-button>
  <context-separator />
  <context-button id="Delete" label="Delete" icon="lucide:trash-2">
    <button-action type="value" target="LastAction" value="Delete" />
  </context-button>
</button>
<criteria id="LastAction"
          component="text"
          label="Last option chosen"
          readonly="true" />

Atributos

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

Atributo	Control	Valores
label	Etiqueta del botón	text
dependency	Se abre con	rightclick
context-button	Iconos	true / false
context-button	Submenú Exportar	true / false
context-separator	Separador antes de Eliminar	true / false

Eventos y acciones

Evento	Descripción
click	Se guarda en la opción del menú cuando el usuario la elige.

Acción (type)	Qué hace
show-context-menu	Abre el menú contextual debajo del botón que la lanza, con un clic izquierdo.

Referencia completa

• Documentación completa de este componente
• Referencia XSD del elemento

note

El menú se dibuja sobre toda la página, fuera de la vista previa, así que sigue el modo de color del sitio y no el del interruptor Claro / Oscuro de la vista previa.

Recetas

Menú de acciones de fila

Un botón con la acción show-context-menu abre su propio menú con un clic izquierdo, justo debajo de sí mismo: el típico botón de "más acciones". Así también cada fila de una tabla obtiene un botón que abre el menú contextual de la tabla.

<button id="More" label="Más acciones" icon="lucide:ellipsis" style="no-label">
  <button-action type="show-context-menu" />
  <context-button id="Rename" label="Renombrar" icon="lucide:pencil">
    <button-action type="value" target="Chosen" value="Renombrar" />
  </context-button>
  <context-button id="Move" label="Mover a carpeta" icon="lucide:folder-input">
    <button-action type="value" target="Chosen" value="Mover a carpeta" />
  </context-button>
  <context-button id="Archive" label="Archivar" icon="lucide:archive">
    <button-action type="value" target="Chosen" value="Archivar" />
  </context-button>
</button>
<criteria id="Chosen" component="text" label="Última opción elegida" readonly="true" />

Opciones que ejecutan cualquier acción

Las acciones de una opción son las de cualquier botón. Aquí Editar abre un diálogo y Eliminar pide una confirmación con un mensaje predefinido: el diálogo de confirmación es el real, y Aceptar deja continuar las acciones que lo siguen.

<button id="Customer" label="Clic derecho sobre el cliente">
  <context-button id="EditOpt" label="Editar" icon="lucide:pencil">
    <button-action type="dialog" target="EditCustomer" />
  </context-button>
  <context-separator />
  <context-button id="DeleteOpt" label="Eliminar" icon="lucide:trash-2">
    <button-action type="confirm" target="DeleteMsg" />
  </context-button>
</button>

<dialog id="EditCustomer" label="Editar cliente" style="modal-sm">
  <tag type="div" style="modal-body" label="Actualiza los datos del cliente y guarda los cambios." />
  <tag type="div" style="modal-footer">
    <button id="CloseEdit" label="Cerrar" style="btn-primary">
      <button-action type="close" target="EditCustomer" />
    </button>
  </tag>
</dialog>

<message id="DeleteMsg" title="¿Eliminar el cliente?" message="El cliente y sus pedidos se eliminarán." />

Eventos y acciones

Elegir una opción guarda su evento click, así que una dependencia puede reaccionar a él. Sus acciones se ejecutan en el contexto del componente que posee el menú.

Acción	Descripción
show-context-menu	Abre el menú contextual debajo del botón que la lanza (el botón de una fila de tabla abre el menú de su tabla)

Si ninguna de las opciones es visible (por ejemplo, por sus dependencias), el menú no se abre y se muestra el menú del navegador. Cuando un componente está dentro de otro que también declara un menú, gana el menú del componente interior. Un clic derecho sobre una fila de una tabla o tabla en árbol selecciona la fila antes de que se abra el menú.

Más

• Documentación completa del menú contextual: dónde se puede declarar, dependencias y permisos.
• Referencia XSD del elemento context-button y del elemento context-separator.