当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

ngx-contextmenu

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者沃弘图

操作系统跨平台

开源组织无

适用人群未知

软件概览

ngx-contextmenu

A context menu built with Angular (10) inspired by ui.bootstrap.contextMenu. Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap. Demo Stackblitz example

Installation

npm install ngx-contextmenu @angular/cdk
import ContextMenuModule.forRoot() into your app module
Make sure to include <!doctype html> at the top of your index.html

Usage

Angular 5 support

Please use ngx-contextmenu@4.2.0 with Angular 5 projects.

Template

<ul>
    <li *ngFor="let item of items" [contextMenu]="basicMenu" [contextMenuSubject]="item">Right Click: {{item?.name}}</li>
</ul>
<context-menu>
  <ng-template contextMenuItem (execute)="showMessage('Hi, ' + $event.item.name)">
    Say hi!
  </ng-template>
  <ng-template contextMenuItem divider="true"></ng-template>
  <ng-template contextMenuItem let-item (execute)="showMessage($event.item.name + ' said: ' + $event.item.otherProperty)">
    Bye, {{item?.name}}
  </ng-template>
  <ng-template contextMenuItem passive="true">
    Input something: <input type="text">
  </ng-template>
</context-menu>

Component Code

@Component({
  ...
})
export class MyContextMenuClass {
  public items = [
      { name: 'John', otherProperty: 'Foo' },
      { name: 'Joe', otherProperty: 'Bar' }
  ];
  @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;
}

Context Menu Items

Each context menu item is a <ng-template> element with the contextMenuItem attribute directive applied.
If the item object is used in the context menu item template, the let-item attribute must be applied to the <ng-template> element.** Note: ** Make sure to use the item?.property syntax in the template rather than item.property as the item will be initially undefined.
Every context menu item emits execute events. The $event object is of the form { event: MouseEvent, item: any } where event is the mouse click eventthat triggered the execution and item is the current item.
The divider input parameter is optional. Items default to normal menu items. If divider is true, all the other inputs are ignored.
The passive input parameter is optional. If passive is true, the menu item will not emit execute events or closethe context menu when clicked.
The enabled input parameter is optional. Items are enabled by default.This can be a boolean value or a function definition that takes an item and returns a boolean.
The visible input parameter is optional. Items are visible by default. This property enables you to show certain context menu items based on what the data item is.This can be a boolean value or a function definition that takes an item and returns a boolean.
Within the template, you have access to any components and variables available in the outer context.

<context-menu>
  <ng-template contextMenuItem let-item [visible]="isMenuItemType1" [enabled]="false" (execute)="showMessage('Hi, ' + $event.item.name)">
    Say hi, {{item?.name}}!  <my-component [attribute]="item"></my-component>
    With access to the outside context: {{ outsideValue }}
  </ng-template>
</context-menu>

public outsideValue = "something";
public isMenuItemType1(item: any): boolean {
  return item.type === 'type1';
}

Sub-menus

You can specify sub-menus like this:

<ul>
    <li *ngFor="let item of items" [contextMenu]="basicMenu" [contextMenuSubject]="item">Right Click: {{item?.name}}</li>
</ul>
<context-menu>
  <ng-template contextMenuItem [subMenu]="saySubMenu">
    Say...
  </ng-template>
  <context-menu #saySubMenu>
    <ng-template contextMenuItem (execute)="showMessage('Hi, ' + $event.item.name)">
      ...hi!
    </ng-template>
    <ng-template contextMenuItem (execute)="showMessage('Hola, ' + $event.item.name)">
      ...hola!
    </ng-template>
    <ng-template contextMenuItem (execute)="showMessage('Salut, ' + $event.item.name)">
      ...salut!
    </ng-template>
  </context-menu>
  <ng-template contextMenuItem divider="true"></ng-template>
  <ng-template contextMenuItem let-item (execute)="showMessage($event.item.name + ' said: ' + $event.item.otherProperty)">
    Bye, {{item?.name}}
  </ng-template>
  <ng-template contextMenuItem passive="true">
    Input something: <input type="text">
  </ng-template>
</context-menu>

Notes:

The sub <context-menu> can not be placed inside the <ng-template> that references it.
Sub-menus may be nested as deeply as you wish.

Upgrade from angular2-contextmenu 0.x

Change package.json to reference ngx-contextmenu instead of angular2-contextmenu
Upgrade to @angular 4.x
Use <ng-template> instead of <template>
Update any styles that referenced .angular2-contextmenu to use .ngx-contextmenu instead

Note: The imperative way of declaring context menu items has been removed. i.e. You can't pass an actions property to contextMenuService.show.next().

Using `visible` and `enabled` functions

If you need access to properties in your component from within the enabled or visible functions, you can pass in an arrow function.

<ng-template ... [visible]="isMenuItemOutsideValue">

public outsideValue = "something";
public isMenuItemOutsideValue = (item: any): boolean => {
  return item.type === this.outsideValue;
}

Multiple Context Menus

You can use multiple context menus in the same component if you would like.

<ul>
    <li *ngFor="let item of items" [contextMenu]="basicMenu" [contextMenuSubject]="item">{{item?.name}}</li>
</ul>
<context-menu #basicMenu>
  ...
</context-menu>

<ul>
    <li *ngFor="let item of items" [contextMenu]="otherMenu" [contextMenuSubject]="item">{{item?.name}}</li>
</ul>
<context-menu #otherMenu>
  ...
</context-menu>

@ViewChild('basicMenu') public basicMenu: ContextMenuComponent;
@ViewChild('otherMenu') public otherMenu: ContextMenuComponent;

Context Menu In a Different Component

If your <context-menu> component is in a different component from your list, you'll need to wire up the context menu event yourself.

<ul>
    <li *ngFor="let item of items" (contextmenu)="onContextMenu($event, item)">Right Click: {{item.name}}</li>
</ul>

import { ContextMenuService } from 'ngx-contextmenu';

@Component({
  ...
})
export class MyContextMenuClass {
  public items = [
      { name: 'John', otherProperty: 'Foo' },
      { name: 'Joe', otherProperty: 'Bar' }
  ];

  // Optional
  @Input() contextMenu: ContextMenuComponent;

  constructor(private contextMenuService: ContextMenuService) {}

  public onContextMenu($event: MouseEvent, item: any): void {
    this.contextMenuService.show.next({
      // Optional - if unspecified, all context menu components will open
      contextMenu: this.contextMenu,
      event: $event,
      item: item,
    });
    $event.preventDefault();
    $event.stopPropagation();
  }
}

Triggering the Context Menu with a Different Event

The context menu can be triggered at any point using the method above. For instance, to trigger the context menuwith a left click instead of a right click, use this html:

<ul>
    <li *ngFor="let item of items" (click)="onContextMenu($event, item)">Left Click: {{item.name}}</li>
</ul>

This could be (keydown), (mouseover), or (myCustomEvent) as well.

Positioning the Context Menu around an element

If you want to override the context menu positioning to be appended to an element instead of based on mouse position,provide an anchorElement to the contextMenuService. This makes sense if you want to trigger the context menu witha non-MouseEvent.

public onContextMenu($event: KeyboardEvent, item: any): void {
  this.contextMenuService.show.next({
    anchorElement: $event.target,
    // Optional - if unspecified, all context menu components will open
    contextMenu: this.contextMenu,
    event: <any>$event,
    item: item,
  });
  $event.preventDefault();
  $event.stopPropagation();
}

Custom Styles

The html that is generated for the context menu looks like this:

<div class="dropdown ngx-contextmenu">
  <ul class="dropdown-menu">
    <li>
      <a><!-- the template for each context menu item goes here --></a>
      <span><!-- the template for each passive context menu item goes here --></span>
    </li>
  </ul>
</div>

You can key off of the ngx-contextmenu class to create your own styles. Note that the ul.dropdown-menu will have inline styles applied for position, display, left and top so that it will be positioned at the cursor when you right-click.

.ngx-contextmenu .dropdown-menu {
  border: solid 1px chartreuse;
  background-color: darkgreen;
  padding: 0;
}
.ngx-contextmenu li {
  display: block;
  border-top: solid 1px chartreuse;
  text-transform: uppercase;
  text-align: center;
}
.ngx-contextmenu li:first-child {
  border-top:none;
}
.ngx-contextmenu a {
  color:chartreuse;
  display: block;
  padding: 0.5em 1em;
}
.ngx-contextmenu a:hover {
  color:darkgreen;
  background-color:chartreuse;
}

Bootstrap 4

If you're using Bootstrap 4, you can specify a useBootstrap4 property in the forRoot function of the ContextMenuModule in order to get the appropriate class names. Like this:

@NgModule({
  import: [
    ContextMenuModule.forRoot({
      useBootstrap4: true,
    }),
  ],
})
export class AppModule {}

Or, if you want to repeat yourself, you can add a useBootstrap4 attribute to each context-menu component. Like this:

<context-menu [useBootstrap4]="true"></context-menu>

Different styling on menus

If you want to style one menu differently than other menus, you can add a custom style to the menu.

<context-menu [menuClass]="'mystyle'"></context-menu>

Please note that the style needs to be global to affect the menu, since the menu element is added to the page outside the component that triggers the menu.

AutoFocus

You can optionally set focus on the context menu whenever it opens. This enables a user to easily tab through the context menu items and press enter to select them.

@NgModule({
  import: [
    ContextMenuModule.forRoot({
      autoFocus: true,
    }),
  ],
})
export class AppModule {}

Keyboard navigation

You can use the keyboard to manipulate the context menu. Note: Keyboard navigation should be used in conjunction with autoFocus, since key events are only captured when the context menu is focused.

Key	Action
ArrowDown	Move to next menu item (wrapping)
ArrowUp	Move to previous menu item (wrapping)
ArrowRight	Open submenu of current menu item if present
ArrowLeft	Close current menu unless already at root menu
Enter \| Space	Open submenu or execute current menu item
Esc	Close current menu

Disable Context Menu

If you need to disable the context menu, you can pass a boolean to the [disabled] input:

<context-menu [disabled]="true"></context-menu>

Close event emitter

There is a (close) output EventEmitter that you can subscribe to for notifications when the context menu closes (either by clicking outside or choosing a menu item).

<context-menu (close)="processContextMenuCloseEvent()"></context-menu>

Dynamic context menu

The items in the context menu are completely controlled by the contextMenuActions object.

<ul>
    <li *ngFor="item in items" [contextMenu]="myContextMenu" [contextMenuSubject]="item">Right Click: {{item.name}}</li>
</ul>
<context-menu #myContextMenu>
  <ng-template *ngFor="let action of contextMenuActions" contextMenuItem let-item
    [visible]="action.visible" [enabled]="action.enabled" [divider]="action.divider"
    (execute)="action.click($event.item)">
    {{ action.html($event.item) }}
  </ng-template>
</context-menu>

@Component({
  ...
})
export class MyContextMenuClass {
  public items = [
      { name: 'John', otherProperty: 'Foo', type: 'type1' },
      { name: 'Joe', otherProperty: 'Bar', type: 'type2' }
  ];
  @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
  public contextMenuActions = [
        {
          html: (item) => `Say hi!`,
          click: (item) => alert('Hi, ' + item.name),
          enabled: (item) => true,
          visible: (item) => item.type === 'type1',
        },
        {
          divider: true,
          visible: true,
        },
        {
          html: (item) => `Something else`,
          click: (item) => alert('Or not...'),
          enabled: (item) => false,
          visible: (item) => item.type === 'type1',
        },
      ];
}

使用案例

Angular2或Angular4使用echarts ， ngx-echarts的方法

一个比较正确的使用方法：https://github.com/xieziyu/ngx-echarts 1、 npm install echarts --save npm install ngx-echarts --save 如果网速差，可以使用淘宝镜像 2、项目中.angular-cli.json 中添加echarts { "scripts": [ // ... // a
Nginx官方文档(十四)【HTTP之ngx_http_autoindex_module,ngx_http_browser_module,ngx_http_charset_module】

ngx_http_autoindex_module 示例配置指令 autoindex autoindex_exact_size autoindex_format autoindex_localtime ngx_http_autoindex_module 模块处理以斜线字符（/）结尾的请求并生成一个目录列表。当 ngx_http_index_module 模块找不到索引文件时，通常会将请求传递给
Nginx 项目 ngx_module_t 接口学习

nginx中功能模块抽象接口(Interface),所有要加入到nginx项目中的功能模块必须实现此接口,实现此接口的模块实例将会初始化到全局数组ngx_modules[]中,该数组在项目编译时生成. typedef struct ngx_module_s ngx_module_t;接口定义 : struct ngx_module_s { ngx_uint_t
contextMenuStrip添加菜单项

一.简单添加 (1)this.contextMenustrip1.Item.Add(“toolstripMenuitem1”)------------------添加单个菜单项 (2)this.contextMenustrip1.Item.AddRange(new System.windows.forms.ToolstripItem[]{this.toolstripMenuItem1,this.t
ContextMenu菜单方法

示例：main.xml <span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" an

ngx-contextmenu

ngx-contextmenu

Installation

Usage

Angular 5 support

Template

Component Code

Context Menu Items

Sub-menus

Upgrade from angular2-contextmenu 0.x

Using `visible` and `enabled` functions

Multiple Context Menus

Context Menu In a Different Component

Triggering the Context Menu with a Different Event

Positioning the Context Menu around an element

Custom Styles

Bootstrap 4

Different styling on menus

AutoFocus

Keyboard navigation

Disable Context Menu

Close event emitter

Dynamic context menu

同类工具

相关阅读

相关文章

相关问答

相关文档

ngx-contextmenu

ngx-contextmenu

Installation

Usage

Angular 5 support

Template

Component Code

Context Menu Items

Sub-menus

Upgrade from angular2-contextmenu 0.x

Using visible and enabled functions

Multiple Context Menus

Context Menu In a Different Component

Triggering the Context Menu with a Different Event

Positioning the Context Menu around an element

Custom Styles

Bootstrap 4

Different styling on menus

AutoFocus

Keyboard navigation

Disable Context Menu

Close event emitter

Dynamic context menu

同类工具

相关阅读

相关文章

相关问答

相关文档

Using `visible` and `enabled` functions