Navigation

ContextMenu

Menu contestuale attivato dal click destro del mouse. Supporta submenu annidati, modalità globale per tutto il documento, attivazione programmatica e posizionamento automatico con rilevamento bordi.

Import

import { ContextMenu } from '@pzeta/vue-components'
import type { MenuItem } from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`model`	`MenuItem[]`	`[]`	Array di elementi del menu
`appendTo`	`'body' \| 'self' \| string \| HTMLElement`	`'body'`	Elemento a cui appendere il menu
`breakpoint`	`string`	`undefined`	Breakpoint per nascondere il menu
`global`	`boolean`	`false`	Se `true`, aggiunge un listener `contextmenu` globale su tutto il documento
`autoZIndex`	`boolean`	`true`	Gestione automatica dello z-index
`baseZIndex`	`number`	`0`	Valore base z-index
`tabindex`	`number`	`0`	Indice di tabulazione
`ariaLabel`	`string`	`undefined`	Label ARIA del menu
`ariaLabelledby`	`string`	`undefined`	ID dell'elemento che fornisce il label ARIA

Emits

Evento	Payload	Descrizione
`focus`	`FocusEvent`	Emesso quando il menu riceve il focus
`blur`	`FocusEvent`	Emesso quando il menu perde il focus
`beforeShow`	—	Emesso prima che il menu diventi visibile
`beforeHide`	—	Emesso prima che il menu venga nascosto
`show`	—	Emesso quando il menu è visibile
`hide`	—	Emesso quando il menu è nascosto

Slot

Slot	Scope	Descrizione
`item`	`{ item: MenuItem; label?: string; props: Record<string, unknown>; hasSubmenu: boolean }`	Template personalizzato per ogni voce
`itemicon`	`{ item: MenuItem; class: string }`	Template personalizzato per l'icona della voce
`submenuicon`	`{ active: boolean }`	Template personalizzato per l'icona del submenu

Esempi

Modalità globale (tutto il documento)

Attivazione programmatica

Con submenu annidati

Template voce personalizzato

Metodi esposti (ref)

Metodo	Firma	Descrizione
`show`	`(event: MouseEvent) => void`	Mostra il menu alla posizione del mouse
`hide`	`() => void`	Nasconde il menu
`toggle`	`(event: MouseEvent) => void`	Alterna la visibilità del menu

Comportamento

Il menu si posiziona automaticamente alle coordinate del click destro con rilevamento dei bordi dello schermo.
Quando vengono aperti più ContextMenu contemporaneamente, il precedente si chiude automaticamente.
La chiusura avviene al click fuori dall'area del menu.
I link con target="_blank" ricevono automaticamente rel="noopener noreferrer".

Accessibilità

L'evento contextmenu viene prevenuto sull'area target.
Il menu supporta navigazione da tastiera.

TypeScript

import type {
  ContextMenuProps,
  ContextMenuEmits,
  ContextMenuSlots,
  ContextMenuExpose,
  ContextMenuItemSlotProps,
} from '@pzeta/vue-components'

Breadcrumb

Navigazione a briciole di pane per indicare la posizione dell'utente nella gerarchia dell'applicazione. Supporta router-link, link esterni, icone, severity e dimensioni.

MegaMenu

Menu di navigazione con pannelli mega dropdown organizzati automaticamente in colonne. Supporta orientazione orizzontale e verticale, slot per start/end e template personalizzati.