Creating a context menu

The ContextMenu component is used to create a context menu.

Context Menu with actions

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
Imports
import live-web.dom
import live-web-view.button
import live-web-view.overlay
Styles
static any[] use = [PrimaryButton, ContextMenu]
Content
ContextMenu{ id: contextMenu }
PrimaryButton{ 
    T`Open Context Menu`
    on click: (e) => {
        e.preventDefault()
        contextMenu.show(
            { x: e.clientX, y: e.clientY },
            ContextMenuActionsView.create([
                { label: 'Item 1', action: () => {}},
                { label: 'Item 2', action: () => {}},
                { label: 'Item 3', action: () => {}}
            ])
        )
    }
}

Context Menu with custom content

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
Imports
import live-web.dom
import live-web-view.button
import live-web-view.overlay
Styles
static any[] use = [PrimaryButton, ContextMenu, Content]
Content
ContextMenu{ id: contextMenu }
PrimaryButton{ 
    T`Open Context Menu`
    on click: (e) => {
        e.preventDefault()
        contextMenu.show(
            { x: e.clientX, y: e.clientY },
            Content{
                P`Context Menu Content`
            }
        )
    }
}

Right click context menu

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
Imports
import live-web.dom
import live-web-view.button
import live-web-view.overlay
Styles
static any[] use = [PrimaryButton, ContextMenu, Content]
Content
ContextMenu{ id: contextMenu }
Content{
    P{ 
        T`Right click `
        A{
            T`here`
            on contextmenu: (e) => {
                e.preventDefault()
                contextMenu.show(
                    { x: e.clientX, y: e.clientY },
                    ContextMenuActionsView.create([
                        { label: 'Item 1', action: () => {}},
                        { label: 'Item 2', action: () => {}},
                        { label: 'Item 3', action: () => {}}
                    ])
                )
            }
        }
        T` to open context menu.`
    }
}