• Dropdown下拉菜单
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • [nz-dropdown]directive
      • nz-dropdown-menucomponent
      • NzContextMenuServiceservice

    Dropdown下拉菜单

    向下弹出的列表。

    何时使用

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

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzDropDownModule } from 'ng-zorro-antd/dropdown';

    代码演示

    Dropdown下拉菜单 - 图1

    基本

    最简单的下拉菜单。

    1. import { Component } from '@angular/core';
    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下拉菜单 - 图3

    触发事件

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-event',
    5.   template: `
    6.     <a nz-dropdown [nzDropdownMenu]="menu">
    7.       Hover me, Click menu item
    8.       <i nz-icon nzType="down"></i>
    9.     </a>
    10.     <nz-dropdown-menu #menu="nzDropdownMenu">
    11.       <ul nz-menu>
    12.         <li nz-menu-item (click)="log('1st menu item')">1st menu item</li>
    13.         <li nz-menu-item (click)="log('2nd menu item')">2nd menu item</li>
    14.         <li nz-menu-item (click)="log('3rd menu item')">3rd menu item</li>
    15.       </ul>
    16.     </nz-dropdown-menu>
    17.   `
    18. })
    19. export class NzDemoDropdownEventComponent {
    20.   log(data: string): void {
    21.     console.log(data);
    22.   }
    23. }

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

    Dropdown下拉菜单 - 图5

    右键菜单

    在区域内任意右击触发。

    1. import { Component } from '@angular/core';
    2. import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
    4. @Component({
    5.   selector: 'nz-demo-dropdown-context-menu',
    6.   template: `
    7.     <div class="context-area" (contextmenu)="contextMenu($event, menu)">
    8.       <span class="context-intro">Context Menu</span>
    9.     </div>
    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-item nzDisabled>disabled menu item</li>
    15.         <li nz-submenu nzTitle="sub menu">
    16.           <ul>
    17.             <li nz-menu-item>3rd menu item</li>
    18.             <li nz-menu-item>4th menu item</li>
    19.           </ul>
    20.         </li>
    21.         <li nz-submenu nzDisabled nzTitle="disabled sub menu">
    22.           <ul>
    23.             <li nz-menu-item>3rd menu item</li>
    24.             <li nz-menu-item>4th menu item</li>
    25.           </ul>
    26.         </li>
    27.       </ul>
    28.     </nz-dropdown-menu>
    29.   `,
    30.   styles: [
    31.     `
    32.       .context-area {
    33.         background: rgb(190, 200, 200);
    34.         padding: 32px;
    35.         text-align: center;
    36.       }
    38.       .context-intro {
    39.         color: #fff;
    40.         font-size: 14px;
    41.       }
    42.     `
    43.   ]
    44. })
    45. export class NzDemoDropdownContextMenuComponent {
    46.   contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
    47.     this.nzContextMenuService.create($event, menu);
    48.   }
    50.   closeMenu(): void {
    51.     this.nzContextMenuService.close();
    52.   }
    54.   constructor(private nzContextMenuService: NzContextMenuService) {}
    55. }

    Dropdown下拉菜单 - 图6

    弹出位置

    支持 6 个弹出位置。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-placement',
    5.   template: `
    6.     <div>
    7.       <ng-container *ngFor="let position of listOfPosition">
    8.         <button nz-button nz-dropdown [nzDropdownMenu]="menu" [nzPlacement]="position">{{ position }}</button>
    9.         <nz-dropdown-menu #menu="nzDropdownMenu">
    10.           <ul nz-menu>
    11.             <li nz-menu-item>1st menu item length</li>
    12.             <li nz-menu-item>2nd menu item length</li>
    13.             <li nz-menu-item>3rd menu item length</li>
    14.           </ul>
    15.         </nz-dropdown-menu>
    16.       </ng-container>
    17.     </div>
    18.   `,
    19.   styles: [
    20.     `
    21.       [nz-button] {
    22.         margin-right: 8px;
    23.         margin-bottom: 8px;
    24.       }
    25.     `
    26.   ]
    27. })
    28. export class NzDemoDropdownPlacementComponent {
    29.   listOfPosition = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'];
    30. }

    Dropdown下拉菜单 - 图7

    触发方式

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

    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.     </nz-dropdown-menu>
    30.   `
    31. })
    32. 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>
    23.         </button>
    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. }

    Dropdown下拉菜单 - 图9

    菜单隐藏方式

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-dropdown-overlay-visible',
    5.   template: `
    6.     <a nz-dropdown [nzDropdownMenu]="menu" [nzClickHide]="false" [(nzVisible)]="visible">
    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>Clicking me will not close the menu.</li>
    13.         <li nz-menu-item>Clicking me will not close the menu also.</li>
    14.         <li nz-menu-item (click)="visible = false">Clicking me will close the menu</li>
    15.       </ul>
    16.     </nz-dropdown-menu>
    17.   `
    18. })
    19. export class NzDemoDropdownOverlayVisibleComponent {
    20.   visible = false;
    21. }

    API

    [nz-dropdown]directive

    参数说明类型默认值
    [nzDropdownMenu]Dropdown 下拉菜单组件NzDropdownMenuComponent-
    [nzDisabled]菜单是否禁用boolean-
    [nzPlacement]菜单弹出位置'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight''bottomLeft'
    [nzTrigger]触发下拉的行为'click' | 'hover''hover'
    [nzClickHide]点击后是否隐藏菜单booleantrue
    [nzVisible]菜单是否显示，可双向绑定boolean-
    [nzBackdrop]是否在 nzTrigger 为 click时增加背景蒙版booleantrue
    [nzOverlayClassName]下拉根元素的类名称string-
    [nzOverlayStyle]下拉根元素的样式object-
    (nzVisibleChange)菜单显示状态改变时调用，参数为 nzVisibleEventEmitter<boolean>-

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

    nz-dropdown 下的 nz-menu 默认不可选中。如果需要菜单可选中，可以指定 <ul nz-menu nzSelectable>.

    nz-dropdown-menucomponent

    用于包裹菜单项，可以通过 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>
    8. </nz-dropdown-menu>

    NzContextMenuServiceservice

    用于右键弹出下拉菜单，具体参见示例

    参数说明参数返回
    create创建右键菜单($event:MouseEvent, menu:NzDropdownMenuComponent)-
    close关闭右键菜单--