Dropdown下拉菜单

    当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

    基本

    最简单的下拉菜单。

    3. @Component({
    4.   selector: 'nz-demo-dropdown-basic',
    5.   template: `
    6.     <a nz-dropdown [nzDropdownMenu]="menu">
    7.       Hover me
    8.       <i nz-icon nzType="down"></i>
    9.     </a>
    10.     <nz-dropdown-menu #menu="nzDropdownMenu">
    11.       <ul nz-menu nzSelectable>
    12.         <li nz-menu-item>1st menu item</li>
    13.         <li nz-menu-item>2nd menu item</li>
    14.         <li nz-menu-item>3rd menu item</li>
    15.       </ul>
    16.     </nz-dropdown-menu>
    17.   `
    18. })
    19. export class NzDemoDropdownBasicComponent {}

    Dropdown下拉菜单 - 图4

    其他元素

    分割线和不可用菜单项。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-item',
    5.   template: `
    6.     <a nz-dropdown [nzDropdownMenu]="menu">
    7.       Hover me
    8.       <i nz-icon nzType="down"></i>
    9.     </a>
    10.     <nz-dropdown-menu #menu="nzDropdownMenu">
    11.       <ul nz-menu>
    12.         <li nz-menu-item>1st menu item</li>
    13.         <li nz-menu-item>2nd menu item</li>
    14.         <li nz-menu-divider></li>
    15.         <li nz-menu-item nzDisabled>3rd menu item（disabled）</li>
    16.       </ul>
    17.     </nz-dropdown-menu>
    18.   `
    19. })
    20. export class NzDemoDropdownItemComponent {}

    触发事件

    点击菜单项后会触发事件，用户可以自由添加各种事件进行不同的操作。

    多级菜单

    传入的菜单里有多个层级。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-sub-menu',
    5.   template: `
    6.     <a nz-dropdown [nzDropdownMenu]="menu" (nzVisibleChange)="change($event)">
    7.       Cascading menu
    8.       <i nz-icon nzType="down"></i>
    9.     </a>
    10.     <nz-dropdown-menu #menu="nzDropdownMenu">
    11.       <ul nz-menu>
    12.         <li nz-menu-item>1st menu item</li>
    13.         <li nz-menu-item>2nd menu item</li>
    14.         <li nz-submenu nzTitle="sub menu">
    15.           <ul>
    16.             <li nz-menu-item>3rd menu item</li>
    17.             <li nz-menu-item>4th menu item</li>
    18.           </ul>
    19.         </li>
    20.         <li nz-submenu nzDisabled nzTitle="disabled sub menu">
    21.           <ul>
    22.             <li nz-menu-item>3rd menu item</li>
    23.             <li nz-menu-item>4th menu item</li>
    24.           </ul>
    25.         </li>
    26.       </ul>
    27.     </nz-dropdown-menu>
    28.   `
    29. })
    30. export class NzDemoDropdownSubMenuComponent {
    31.   change(value: boolean): void {
    32.     console.log(value);
    33.   }
    34. }

    Dropdown下拉菜单 - 图7

    右键菜单

    在区域内任意右击触发。

    1. import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-context-menu',
    5.   template: `
    6.     <div class="context-area" (contextmenu)="contextMenu($event, menu)">
    7.       Right Click on here
    8.     </div>
    9.     <nz-dropdown-menu #menu="nzDropdownMenu">
    10.       <ul nz-menu>
    11.         <li nz-menu-item>1st menu item</li>
    12.         <li nz-menu-item>2nd menu item</li>
    13.         <li nz-menu-item nzDisabled>disabled menu item</li>
    14.         <li nz-submenu nzTitle="sub menu">
    15.           <ul>
    17.             <li nz-menu-item>4th menu item</li>
    18.           </ul>
    19.         </li>
    20.         <li nz-submenu nzDisabled nzTitle="disabled sub menu">
    21.           <ul>
    22.             <li nz-menu-item>3rd menu item</li>
    23.             <li nz-menu-item>4th menu item</li>
    24.           </ul>
    25.         </li>
    26.       </ul>
    27.     </nz-dropdown-menu>
    28.   `,
    29.   styles: [
    30.     `
    31.       .context-area {
    32.         background: #f7f7f7;
    33.         color: #777;
    34.         text-align: center;
    35.         height: 200px;
    36.         line-height: 200px;
    37.       }
    38.     `
    39.   ]
    40. })
    41. export class NzDemoDropdownContextMenuComponent {
    42.   contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
    43.     this.nzContextMenuService.create($event, menu);
    44.   }
    46.   closeMenu(): void {
    47.     this.nzContextMenuService.close();
    48.   }
    50.   constructor(private nzContextMenuService: NzContextMenuService) {}
    51. }

    弹出位置

    支持 6 个弹出位置。

    Dropdown下拉菜单 - 图9

    触发方式

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-trigger',
    5.   template: `
    6.     <a nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">
    7.       Click me
    8.       <i nz-icon nzType="down"></i>
    9.     </a>
    10.     <nz-dropdown-menu #menu="nzDropdownMenu">
    11.       <ul nz-menu>
    12.         <li nz-menu-item>1st menu item</li>
    13.         <li nz-menu-item>2nd menu item</li>
    14.         <li nz-menu-divider></li>
    15.         <li nz-menu-item nzDisabled>disabled menu item</li>
    16.         <li nz-submenu nzTitle="sub menu">
    17.           <ul>
    18.             <li nz-menu-item>3rd menu item</li>
    19.             <li nz-menu-item>4th menu item</li>
    20.           </ul>
    21.         </li>
    22.         <li nz-submenu nzDisabled nzTitle="disabled sub menu">
    23.           <ul>
    24.             <li nz-menu-item>3rd menu item</li>
    25.             <li nz-menu-item>4th menu item</li>
    26.           </ul>
    27.         </li>
    28.       </ul>
    29.   `
    30. })
    31. export class NzDemoDropdownTriggerComponent {}

    带下拉框的按钮

    左边是按钮，右边是额外的相关功能菜单。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-dropdown-button',
    5.   template: `
    6.     <nz-button-group>
    7.       <button nz-button (click)="log()">DropDown</button>
    8.       <button nz-button nz-dropdown [nzDropdownMenu]="menu1" nzPlacement="bottomRight">
    9.         <i nz-icon nzType="ellipsis"></i>
    10.       </button>
    11.     </nz-button-group>
    12.     <nz-button-group>
    13.       <button nz-button (click)="log()">DropDown</button>
    14.       <button nz-button nz-dropdown [nzDropdownMenu]="menu2" nzPlacement="bottomRight">
    15.         <i nz-icon nzType="user"></i>
    16.       </button>
    17.     </nz-button-group>
    18.     <nz-button-group>
    19.       <button nz-button disabled>DropDown</button>
    20.       <button nz-button disabled nz-dropdown [nzDropdownMenu]="menu3" nzPlacement="bottomRight">
    21.         <i nz-icon nzType="ellipsis"></i>
    23.     </nz-button-group>
    24.     <button nz-button nz-dropdown [nzDropdownMenu]="menu4">
    25.       Button
    26.       <i nz-icon nzType="down"></i>
    27.     </button>
    28.     <nz-dropdown-menu #menu1="nzDropdownMenu">
    29.       <ul nz-menu>
    30.         <li nz-menu-item>menu1 1st menu item</li>
    31.         <li nz-menu-item>menu1 2nd menu item</li>
    32.         <li nz-menu-item>menu1 3rd menu item</li>
    33.       </ul>
    34.     </nz-dropdown-menu>
    35.     <nz-dropdown-menu #menu2="nzDropdownMenu">
    36.       <ul nz-menu>
    37.         <li nz-menu-item>menu2 1st menu item</li>
    38.         <li nz-menu-item>menu2 2nd menu item</li>
    39.         <li nz-menu-item>menu2 3rd menu item</li>
    40.       </ul>
    41.     </nz-dropdown-menu>
    42.     <nz-dropdown-menu #menu3="nzDropdownMenu">
    43.       <ul nz-menu>
    44.         <li nz-menu-item>menu3 1st menu item</li>
    45.         <li nz-menu-item>menu3 2nd menu item</li>
    46.         <li nz-menu-item>menu3 3rd menu item</li>
    47.       </ul>
    48.     </nz-dropdown-menu>
    49.     <nz-dropdown-menu #menu4="nzDropdownMenu">
    50.       <ul nz-menu>
    51.         <li nz-menu-item>menu4 1st menu item</li>
    52.         <li nz-menu-item>menu4 2nd menu item</li>
    53.         <li nz-menu-item>menu4 3rd menu item</li>
    54.       </ul>
    55.     </nz-dropdown-menu>
    56.   `,
    57.   styles: [
    58.     `
    59.       nz-button-group {
    60.         margin: 0 8px 8px 0;
    61.       }
    62.     `
    63.   ]
    64. })
    65. export class NzDemoDropdownDropdownButtonComponent {
    66.   log(): void {
    67.     console.log('click dropdown button');
    68.   }
    69. }

    Dropdown下拉菜单 - 图11

    菜单隐藏方式

    默认是点击关闭菜单，可以关闭此功能。

    菜单使用 nz-menu，还包括菜单项 [nz-menu-item]，分割线 [nz-menu-divider]。

    用于包裹菜单项，可以通过 nzDropdownMenu 模板变量导出后传入 [nz-dropdown] 和 NzContextMenuService。

    注意：每个 nz-dropdown-menu 只能作为一个 [nz-dropdown] 的输入项

    1. <a nz-dropdown [nzDropdownMenu]="menu">Hover me</a>
    2. <nz-dropdown-menu #menu="nzDropdownMenu">
    3.   <ul nz-menu>
    4.     <li nz-menu-item>1st menu item</li>
    5.     <li nz-menu-item>2nd menu item</li>
    6.     <li nz-menu-item>3rd menu item</li>
    7.   </ul>
    方法/属性说明参数返回
    create创建右键菜单($event:MouseEvent | {x:number, y:number}, menu:NzDropdownMenuComponent)-
    close关闭右键菜单--