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.       Right Click on here
  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: #f7f7f7;
  34.         color: #777;
  35.         text-align: center;
  36.         height: 200px;
  37.         line-height: 200px;
  38.       }
  39.     `
  40.   ]
  41. })
  42. export class NzDemoDropdownContextMenuComponent {
  43.   contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
  44.     this.nzContextMenuService.create($event, menu);
  45.   }
  47.   closeMenu(): void {
  48.     this.nzContextMenuService.close();
  49.   }
  51.   constructor(private nzContextMenuService: NzContextMenuService) {}
  52. }

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: string[] = ['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.     <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>
  22.       </button>
  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下拉菜单 - 图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</td><td>{x:number, y:number}, menu:NzDropdownMenuComponent)-
close关闭右键菜单--