Ví dụ stackblitz về tab ngx-bootstrap
|
Menu ngữ cảnh được xây dựng với Angular (6) lấy cảm hứng từ ui. khởi động. danh mục. Các lớp Bootstrap được bao gồm trong đánh dấu, nhưng không có sự phụ thuộc rõ ràng vào Bootstrap. Demo ví dụ Stackblitz Show
Cài đặt
Cách sử dụngHỗ trợ góc 5Vui lòng sử dụng ngx-contextmenu@4. 2. 0 với dự án Angular 5 Mẫu<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> Mã thành phần@Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; } Mục menu ngữ cảnh
<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'; } menu phụBạn có thể chỉ định các menu phụ như thế này <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> ghi chú
Nâng cấp từ angular2-contextmenu 0. x
Ghi chú. Cách bắt buộc khai báo các mục menu ngữ cảnh đã bị xóa. tôi. e. Bạn không thể chuyển thuộc tính <ng-template ... [visible]="isMenuItemOutsideValue">7 cho <ng-template ... [visible]="isMenuItemOutsideValue">8 Sử dụng các hàm Nếu bạn cần truy cập vào các thuộc tính trong thành phần của mình từ bên trong các hàm <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>5 hoặc <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>6, bạn có thể chuyển vào hàm mũi tên <ng-template ... [visible]="isMenuItemOutsideValue"> public outsideValue = "something"; public isMenuItemOutsideValue = (item: any): boolean => { return item.type === this.outsideValue; } Nhiều menu ngữ cảnhBạn có thể sử dụng nhiều menu ngữ cảnh trong cùng một thành phần nếu muốn <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; Menu ngữ cảnh trong một thành phần khácNếu thành phần <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>7 của bạn nằm trong một thành phần khác với danh sách của bạn, bạn sẽ cần tự kết nối sự kiện menu ngữ cảnh <ul> <li *ngFor="let item of items" (contextmenu)="onContextMenu($event, item)">Right Click: {{item.name}}li> ul> @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }0 Kích hoạt Menu ngữ cảnh với một sự kiện khácMenu ngữ cảnh có thể được kích hoạt tại bất kỳ thời điểm nào bằng phương pháp trên. Chẳng hạn, để kích hoạt menu ngữ cảnh bằng nhấp chuột trái thay vì nhấp chuột phải, hãy sử dụng html này @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }1 Đây cũng có thể là public outsideValue = "something"; public isMenuItemOutsideValue = (item: any): boolean => { return item.type === this.outsideValue; }4, public outsideValue = "something"; public isMenuItemOutsideValue = (item: any): boolean => { return item.type === this.outsideValue; }5 hoặc public outsideValue = "something"; public isMenuItemOutsideValue = (item: any): boolean => { return item.type === this.outsideValue; }6 Định vị Menu ngữ cảnh xung quanh một phần tửNếu bạn muốn ghi đè vị trí menu ngữ cảnh để được thêm vào một phần tử thay vì dựa trên vị trí chuột, hãy cung cấp một public outsideValue = "something"; public isMenuItemOutsideValue = (item: any): boolean => { return item.type === this.outsideValue; }7 cho public outsideValue = "something"; public isMenuItemOutsideValue = (item: any): boolean => { return item.type === this.outsideValue; }8. Điều này hợp lý nếu bạn muốn kích hoạt menu ngữ cảnh với sự kiện không phải MouseEvent @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }2 Kiểu tùy chỉnhHtml được tạo cho menu ngữ cảnh trông như thế này @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }3 Bạn có thể tắt lớp <ng-template ... [visible]="isMenuItemOutsideValue">0 để tạo phong cách của riêng mình. Lưu ý rằng <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>0 sẽ có các kiểu nội tuyến được áp dụng cho <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>1, <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>2, <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>3 và <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>4 để nó sẽ được định vị tại con trỏ khi bạn nhấp chuột phải @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }4 Bootstrap 4Nếu bạn đang sử dụng Bootstrap 4, bạn có thể chỉ định thuộc tính <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>5 trong hàm <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>6 của <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>7 để lấy tên lớp phù hợp. Như thế này @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }5 Hoặc, nếu bạn muốn lặp lại chính mình, bạn có thể thêm thuộc tính <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>5 vào mỗi thành phần <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>9. Như thế này @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }6 Kiểu dáng khác nhau trên menuNếu bạn muốn tạo kiểu cho một menu khác với các menu khác, bạn có thể thêm kiểu tùy chỉnh vào menu @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }7 Xin lưu ý rằng kiểu cần phải có tính toàn cầu để ảnh hưởng đến menu, vì phần tử menu được thêm vào trang bên ngoài thành phần kích hoạt menu Lấy nét tự độngBạn có thể tùy ý đặt tiêu điểm vào menu ngữ cảnh bất cứ khi nào nó mở ra. Điều này cho phép người dùng dễ dàng chuyển qua các mục trong menu ngữ cảnh và nhấn enter để chọn chúng @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }8 điều hướng bàn phímBạn có thể sử dụng bàn phím để thao tác với menu ngữ cảnh. Ghi chú. Điều hướng bàn phím nên được sử dụng cùng với @ViewChild('basicMenu') public basicMenu: ContextMenuComponent; @ViewChild('otherMenu') public otherMenu: ContextMenuComponent;0, vì các sự kiện chính chỉ được ghi lại khi menu ngữ cảnh được đặt tiêu điểmKeyActionMũi tênDownChuyển đến mục menu tiếp theo (gói)ArrowUpChuyển đến mục menu trước đó (gói)ArrowRightMở menu con của mục menu hiện tại nếu cóMũi tên TráiĐóng menu hiện tại trừ khi đã ở menu gốcEnter. Dấu cáchMở menu con hoặc thực thi mục menu hiện tạiEscĐóng menu hiện tại Vô hiệu hóa Menu ngữ cảnhNếu bạn cần tắt menu ngữ cảnh, bạn có thể chuyển @ViewChild('basicMenu') public basicMenu: ContextMenuComponent; @ViewChild('otherMenu') public otherMenu: ContextMenuComponent;1 cho đầu vào @ViewChild('basicMenu') public basicMenu: ContextMenuComponent; @ViewChild('otherMenu') public otherMenu: ContextMenuComponent;2 @Component({ ... }) export class MyContextMenuClass { public items = [ { name: 'John', otherProperty: 'Foo' }, { name: 'Joe', otherProperty: 'Bar' } ]; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent; }9 Đóng bộ phát sự kiệnCó một Trình phát sự kiện đầu ra @ViewChild('basicMenu') public basicMenu: ContextMenuComponent; @ViewChild('otherMenu') public otherMenu: ContextMenuComponent;3 mà bạn có thể đăng ký nhận thông báo khi menu ngữ cảnh đóng lại (bằng cách nhấp vào bên ngoài hoặc chọn một mục menu) |
