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下拉菜单 - 图2

    其他元素

    分割线和不可用菜单项。

    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 {}

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

    Dropdown下拉菜单 - 图4

    多级菜单

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

    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. }

    在区域内任意右击触发。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-context-menu',
    5.   template: `
    6.     <div class="context-area" (contextmenu)="contextMenu($event, menu)">
    7.       <span class="context-intro">Context Menu</span>
    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>
    16.             <li nz-menu-item>3rd menu item</li>
    17.             <li nz-menu-item>4th menu item</li>
    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: rgb(190, 200, 200);
    33.         padding: 32px;
    34.         text-align: center;
    35.       }
    37.       .context-intro {
    38.         color: #fff;
    39.         font-size: 14px;
    40.       }
    41.     `
    42.   ]
    43. })
    44. export class NzDemoDropdownContextMenuComponent {
    45.   contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
    46.     this.nzContextMenuService.create($event, menu);
    47.   }
    49.   closeMenu(): void {
    50.     this.nzContextMenuService.close();
    51.   }
    53.   constructor(private nzContextMenuService: NzContextMenuService) {}
    54. }

    Dropdown下拉菜单 - 图6

    弹出位置

    支持 6 个弹出位置。

    默认是移入触发菜单，可以点击触发。

    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 {}

    Dropdown下拉菜单 - 图8

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

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

    菜单隐藏方式

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

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

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

    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创建右键菜单-
    close关闭右键菜单--