https://github.com/onechiporenko/ember-bootstrap-context-menu

Context menu for ember-bootstrap
https://github.com/onechiporenko/ember-bootstrap-context-menu

Last synced: 1 day ago
JSON representation

Context menu for ember-bootstrap

• Host: GitHub
• URL: https://github.com/onechiporenko/ember-bootstrap-context-menu
• Owner: onechiporenko
• License: mit
• Created: 2024-09-06T17:33:02.000Z (27 days ago)
• Default Branch: master
• Last Pushed: 2024-09-18T19:37:06.000Z (15 days ago)
• Last Synced: 2024-09-18T20:12:09.250Z (15 days ago)
• Language: TypeScript
• Homepage: https://onechiporenko.github.io/ember-bootstrap-context-menu/#/demo
• Size: 1.25 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-bootstrap-context-menu

[![CI](https://github.com/onechiporenko/ember-bootstrap-context-menu/actions/workflows/ci.yml/badge.svg)](https://github.com/onechiporenko/ember-bootstrap-context-menu/actions/workflows/ci.yml)

[![Ember Observer Score](https://emberobserver.com/badges/ember-bootstrap-context-menu.svg)](https://emberobserver.com/addons/ember-bootstrap-context-menu)

[![npm version](https://badge.fury.io/js/ember-bootstrap-context-menu.png)](http://badge.fury.io/js/ember-bootstrap-context-menu)

[![License](http://img.shields.io/:license-mit-blue.svg)](http://doge.mit-license.org)

[![Downloads](http://img.shields.io/npm/dm/ember-bootstrap-context-menu.svg)](https://www.npmjs.com/package/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](https://getbootstrap.com/docs/5.3/utilities/spacing/#negative-margin) 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



  Right click me



```


## Compatibility

* `ember-bootstrap@6`

* `bootstrap@5`

## Demo

Check [demo-page](https://onechiporenko.github.io/ember-bootstrap-context-menu/#/demo)