https://github.com/onechiporenko/ember-bootstrap-context-menu
Context menu for ember-bootstrap
https://github.com/onechiporenko/ember-bootstrap-context-menu
Last synced: 2 months 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 (10 months ago)
- Default Branch: master
- Last Pushed: 2025-04-19T20:08:53.000Z (3 months ago)
- Last Synced: 2025-04-19T21:59:01.775Z (3 months ago)
- Language: TypeScript
- Homepage: https://onechiporenko.github.io/ember-bootstrap-context-menu/#/demo
- Size: 732 KB
- 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
[](https://github.com/onechiporenko/ember-bootstrap-context-menu/actions/workflows/ci.yml)
[](https://emberobserver.com/addons/ember-bootstrap-context-menu)
[](http://badge.fury.io/js/ember-bootstrap-context-menu)
[](http://doge.mit-license.org)
[](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)