@abcum/ember-contextmenu 中文文档教程
ember-contextmenu
用于向 Ember.js 应用程序添加上下文快捷菜单的 ember 插件。
Usage
Installation
ember install @abcum/ember-contextmenu
Introduction
ember-contextmenu 插件添加了使用右键单击按钮将上下文快捷菜单添加到 Ember.js 应用程序的功能。 除了特定区域或 ember 组件的单独菜单外,自定义上下文菜单还可以应用于整个应用程序。
Examples
将 context-menu
组件添加到您的应用程序模板。
{{!-- app/templates/application.hbs --}}
{{context-menu}}
要防止出现默认菜单,请将 right-click
组件添加到应用程序模板。
{{!-- app/templates/application.hbs --}}
{{#right-click menu="application.menu"}}
{{!-- all content --}}
{{/right-click}}
{{!-- app/templates/application/menu.hbs --}}
<div class="context-menu-item" {{action (history-back)}}>Back</div>
<div class="context-menu-item" {{action (history-forward)}}>Forward</div>
<div class="context-menu-item" {{action (reload)}}>Reload</div>
<div class="context-menu-item" {{action (transition-to 'logout')}}>Logout</div>
<div class="context-menu-line"></div>
<div class="context-menu-item disabled">© Abcum Ltd</div>
向组件添加菜单时,使用 context-menu
混合,并使用 menuName
键指定文件。
import Ember from "ember";
import MenuMixin from 'ember-contextmenu/mixins/context-menu';
export default Ember.Component.extend(MenuMixin, {
menuName: 'posts.menu',
});
或者,如果您想在操作后显示菜单,请使用 context-menu
帮助程序,并指定文件名。
{{#each model as |post|}}
{{blog-post contextMenu=(context-menu 'post.menu' model=post)}}
{{/each}}
Development
make install
(install bower and ember-cli dependencies)make upgrade
(upgrade ember-cli to the specified version)make tests
(run all tests defined in the package)
ember-contextmenu
An ember addon for adding contextual shortcut menus to an Ember.js app.
Usage
Installation
ember install @abcum/ember-contextmenu
Introduction
The ember-contextmenu addon adds functionality for adding contextual shortcut menus to an Ember.js app, using the right click button. A custom context menu can be applied to the whole application, in addition to individual menus for a specific area, or an ember component.
Examples
Add the context-menu
component to your application template.
{{!-- app/templates/application.hbs --}}
{{context-menu}}
To prevent the default menu from appearing, add the right-click
component to the application template.
{{!-- app/templates/application.hbs --}}
{{#right-click menu="application.menu"}}
{{!-- all content --}}
{{/right-click}}
{{!-- app/templates/application/menu.hbs --}}
<div class="context-menu-item" {{action (history-back)}}>Back</div>
<div class="context-menu-item" {{action (history-forward)}}>Forward</div>
<div class="context-menu-item" {{action (reload)}}>Reload</div>
<div class="context-menu-item" {{action (transition-to 'logout')}}>Logout</div>
<div class="context-menu-line"></div>
<div class="context-menu-item disabled">© Abcum Ltd</div>
When adding a menu to a component use the context-menu
mixin, and specify a file using the menuName
key.
import Ember from "ember";
import MenuMixin from 'ember-contextmenu/mixins/context-menu';
export default Ember.Component.extend(MenuMixin, {
menuName: 'posts.menu',
});
Or if you want to display a menu after an action, use the context-menu
helper, specifying a filename.
{{#each model as |post|}}
{{blog-post contextMenu=(context-menu 'post.menu' model=post)}}
{{/each}}
Development
make install
(install bower and ember-cli dependencies)make upgrade
(upgrade ember-cli to the specified version)make tests
(run all tests defined in the package)