ember-bootstrap-context-menu


ember-bootstrap-context-menu is an Ember-addon that provides a simple mechanism for interaction with user using context menu. This addon is based on ember-bootstrap.

Installation

ember i ember-bootstrap-context-menu

Add next to your application.hbs:

``html

`

Add next to your app.scss (see negative-margin docs for more details) if you want to use multi-level context menu:

`scss
$enable-negative-margins: true;
`

Usage:

`typescript
import Controller from "@ember/controller";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import ContextMenuManager from "ember-bootstrap-context-menu/services/context-menu-manager";

export default class ApplicationController extends Controller {
@service declare contextMenuManager: ContextMenuManager;

@action
showContextMenu(e: PointerEvent): void {
e.preventDefault();
e.stopPropagation();
this.contextMenuManager
.show(
[
{ id: "copy", title: "Copy" },
{ id: "cut", title: "Cut" },
{ id: "paste", title: "Paste" },
{ id: "delete", title: "Delete" },
],
e.pageX,
e.pageY,
)
.then(({ id }) => {
if (id === "delete") {
// do delete
return;
}
if (id === "copy") {
// do copy
return;
}
if (id === "cut") {
// do cut
return;
}
if (id === "paste") {
// do paste
return;
}
});
}
}
`

`hbs



`

Compatibility

- ember-bootstrap@6
- bootstrap@5`

Demo

Check demo-page