1.4.0 • Published 10 months ago

ember-bootstrap-context-menu v1.4.0

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

ember-bootstrap-context-menu

CI Ember Observer Score npm version License Downloads

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:

<ContextMenuContainer />

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

$enable-negative-margins: true;

Usage:

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;
        }
      });
  }
}
<div {{on "contextmenu" this.showContextMenu}}>
  Right click me
</div>

Compatibility

  • ember-bootstrap@6
  • bootstrap@5

Demo

Check demo-page

1.4.0

10 months ago

1.3.0

11 months ago

1.2.0

12 months ago

1.1.1

12 months ago

1.1.0

12 months ago

1.0.2

12 months ago

1.0.1

12 months ago

1.0.0

12 months ago