QContextMenu 📎
Contextual menus are displayed on demand and contain a small set of relevant actions, related to a control, a piece of content, a view in an app, or an area of the UI. When designed right, they deliver relevant tools for completing tasks without adding clutter to the interface.
When to use
- When you need to hide any actions to free space.
Example
Default view:
Using in template:
<q-context-menu
:menu-items="menuItems"
@action="handleAction"
/>
1
2
3
4
2
3
4
Using in component instance:
setup() {
const menuItems = [
{
action: 'action1',
name: 'Menu item 1',
icon: 'q-icon-account'
},
{
action: 'action2',
name: 'Menu item 2',
icon: 'q-icon-bell'
},
{
action: 'action3',
name: 'Menu item 3',
icon: 'q-icon-pic'
}
];
const handleAction = (action) => {
// code
}
return { menuItems, handleAction };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Props
menuItems
- Type:
Array - Default:
null
Array of item's settings.
menuItems MUST be an Array of Objects, each object MUST contain:
action- an item's value (will be passed to handler)name- a button labelicon- a button prefix icon
// import type from lib
import type { QContextMenuPropMenuItems } from '@qvant/qui-max';
// TS type
type QContextMenuPropMenuItems = MenuItem[];
interface MenuItem {
action: string;
name: string;
icon: string;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
position
- Type:
'left' | 'right' - Default:
left
The dropdown's position around the trigger button.
<q-context-menu
:menu-items="menuItems"
position="right"
@action="handleAction"
/>
1
2
3
4
5
2
3
4
5
teleportTo
- Type
String, HTMLElement - Default:
null
Specifies a target element where QContextMenu will be moved from original layout place. (has to be a valid query selector, or an HTMLElement).
<q-context-menu
:menu-items="menuItems"
teleport-to="body"
@action="handleAction"
/>
1
2
3
4
5
2
3
4
5
Events
action
Handle click on menu item.
<q-context-menu
:menu-items="menuItems"
@action="handleAction"
/>
1
2
3
4
2
3
4
setup() {
// ...
const handleAction = (action) => {
// code
}
return { handleAction };
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Slots
default
Optional. HTML element that triggers dropdown
<q-context-menu
:menu-items="menuItems"
@action="handleAction"
>
<template v-slot>
<q-button size="small">Custom trigger</q-button>
</template>
</q-context-menu>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8