em-context-menu

An EmberJS Addon that will help you add context menu for your component.

Compatibility

• Ember.js v3.4 or above
• Ember CLI v2.13 or above
• Node.js v8 or above

Installation

ember install em-context-menu

Usage

• Wrap the context-menu component in each of your list components.

1// template.hbs
2
3<div class="container">
4  <table class="table table-hover">
5    <thead class="thead-light">
6      <tr>
7        <th>Name</th>
8        <th>Author</th>
9        <th>Published Year</th>
10        <th>Price</th>
11      </tr>
12    </thead>
13    <tbody>
14      {{#each model as |book|}}
15        <ContextMenu @tagName="tr" @model={{book}} @menuActions={{menuActions}} @editBook={{action editBook}} @deleteBook={{action deleteBook}}>
16          <td>{{book.name}}</td>
17          <td>{{book.author}}</td>
18          <td>{{book.published_year}}</td>
19          <td>{{book.price}}</td>  
20        </ContextMenu>
21      {{/each}}
22    </tbody>
23  </table>
24</div>
25

• Define your menu actions and action handling in your controller/component.

1// *.js
2
3menuActions: [
4  { 
5    label: 'Edit',
6    action: 'editBook'
7  },
8  {
9    label: 'Delete',
10    action: 'deleteBook'
11  }
12],
13  
14editBook(book) {
15  ...
16},
17
18deleteBook(book) {
19  ...
20}
21

Helpful Links

Live Demo

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.