Ap-Contextual menu

Ap-Contextual displays an overlay menu to display actions related to an element.

<ApContextMenu ref="menu" :items="items2" />

Basic

Ap-Contextual requires a collection of item to display the menu when right click is trigger on element Example on div :

<div @contextmenu="onRightClick">
<ApContextMenu ref="menuBasic" :items="itemsBasic"  />

//script
const menuBasic = ref(null)
const onRightClick = (event) => {
    menuBasic.value.show(event);
};
const  items =  [
  {
    label: 'Option 1',
    command: () => { console.log('Option 1') }
  },
  {    
    label: 'SousMenu 2'
  }
]

With Icons and subMenu

const  items2=  [
      {
        icon: 'ap-icon ap-trash',
        label: 'Option 1',
        command: () => {
          console.log('Option 1')
        }
      },
      {
        icon: 'ap-icon ap-update',
        label: 'SousMenu 2',
        items: [
          {
              label: 'Option 2',
              icon: 'ap-icon ap-zoom-in',
            },
          {
              label: 'Option3',
              icon: 'ap-icon ap-zoom-out',
            }
      ]
      }
    ]

Global

Right-Click anywhere on this page to view the global ContextMenu.

//redcolor 

      {
        icon: 'ap-icon ap-trash2',
        label: 'Supprimer',
        red : true,
      },