Volver a Components

Context Menu

<sg-context-menu> v0.1.1

Menú contextual flotante que aparece con click derecho o programáticamente. Se cierra automáticamente con Escape o click fuera.

Ejemplos

Básico - Click derecho aquí

🖱️ Haz click derecho aquí para ver el menú contextual

example.html 
<div id="context-area" style="padding: 2rem; border: 2px dashed #ccc;">
  Haz click derecho aquí
</div>
<sg-context-menu id="my-menu"></sg-context-menu>

<script>
  const menu = document.getElementById('my-menu');
  const area = document.getElementById('context-area');

  menu.items = [
    { id: 'edit', label: 'Editar', icon: 'edit' },
    { id: 'copy', label: 'Copiar', icon: 'copy' },
    { id: 'divider1', divider: true },
    { id: 'delete', label: 'Eliminar', icon: 'delete', danger: true }
  ];

  area.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    menu.show(e.clientX, e.clientY);
  });
</script>

Items deshabilitados

🖱️ Click derecho - tiene items deshabilitados

example.html 
menu.items = [
  { id: 'save', label: 'Guardar', icon: 'save' },
  { id: 'print', label: 'Imprimir', icon: 'print', disabled: true },
  { id: 'export', label: 'Exportar', icon: 'download' }
];

API Reference

Propiedades

1
Prop Tipo Default Descripción
items ContextMenuItem[] [] Array de items del menú

Eventos

2
Evento Tipo Descripción
itemClick CustomEvent<string> Emitido cuando se hace click en un item. Devuelve el ID del item.
menuClose CustomEvent<void> Emitido cuando el menú se cierra

Cómo usar