Dropdown下拉菜单

向下弹出的列表。

何时使用

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

代码演示

Dropdown下拉菜单 - 图1

基本

最简单的下拉菜单。

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

Dropdown下拉菜单 - 图2

其他元素

分割线和不可用菜单项。

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

Dropdown下拉菜单 - 图3

触发事件

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

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

Dropdown下拉菜单 - 图4

多级菜单

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

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

Dropdown下拉菜单 - 图5

右键菜单

在区域内任意右击触发。

  1. import { Component, TemplateRef } from '@angular/core';
  2. import { NzDropdownContextComponent, NzDropdownService, NzMenuItemDirective } from 'ng-zorro-antd';
  4. @Component({
  5.   selector: 'nz-demo-dropdown-context-menu',
  6.   template: `
  7.     <div
  8.       style="background: rgb(190, 200, 200); padding: 32px;text-align: center"
  9.       (contextmenu)="contextMenu($event, template)"
  10.     >
  11.       <ng-template #template>
  12.         <ul nz-menu nzInDropDown (nzClick)="close($event)">
  13.           <li nz-menu-item>1st menu item</li>
  14.           <li nz-menu-item>2nd menu item</li>
  15.           <li nz-menu-item nzDisabled>disabled menu item</li>
  16.           <li nz-submenu>
  17.             <span title>sub menu</span>
  18.             <ul>
  19.               <li nz-menu-item>3rd menu item</li>
  20.               <li nz-menu-item>4th menu item</li>
  21.             </ul>
  22.           </li>
  23.           <li nz-submenu nzDisabled>
  24.             <span title>disabled sub menu</span>
  25.             <ul>
  26.               <li nz-menu-item>3rd menu item</li>
  27.               <li nz-menu-item>4th menu item</li>
  28.             </ul>
  29.           </li>
  30.         </ul>
  31.       </ng-template>
  32.       <span style="color:#fff;font-size: 14px;">Context Menu</span>
  33.     </div>
  34.   `,
  35.   styles: []
  36. })
  37. export class NzDemoDropdownContextMenuComponent {
  38.   private dropdown: NzDropdownContextComponent;
  40.   contextMenu($event: MouseEvent, template: TemplateRef<void>): void {
  41.     this.dropdown = this.nzDropdownService.create($event, template);
  42.   }
  44.   close(e: NzMenuItemDirective): void {
  45.     console.log(e);
  46.     this.dropdown.close();
  47.   }
  49.   constructor(private nzDropdownService: NzDropdownService) {}
  50. }

Dropdown下拉菜单 - 图6

弹出位置

支持 6 个弹出位置。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-dropdown-placement',
  5.   template: `
  6.     <div>
  7.       <nz-dropdown [nzPlacement]="'bottomLeft'">
  8.         <button nz-button nz-dropdown>bottomLeft</button>
  9.         <ul nz-menu>
  10.           <li nz-menu-item>
  11.             <a>1st menu item length</a>
  12.           </li>
  13.           <li nz-menu-item>
  14.             <a>2nd menu item length</a>
  15.           </li>
  16.           <li nz-menu-item>
  17.             <a>3rd menu item length</a>
  18.           </li>
  19.         </ul>
  20.       </nz-dropdown>
  21.       <nz-dropdown [nzPlacement]="'bottomCenter'">
  22.         <button nz-button nz-dropdown>bottomCenter</button>
  23.         <ul nz-menu>
  24.           <li nz-menu-item>
  25.             <a>1st menu item length</a>
  26.           </li>
  27.           <li nz-menu-item>
  28.             <a>2nd menu item length</a>
  29.           </li>
  30.           <li nz-menu-item>
  31.             <a>3rd menu item length</a>
  32.           </li>
  33.         </ul>
  34.       </nz-dropdown>
  35.       <nz-dropdown [nzPlacement]="'bottomRight'">
  36.         <button nz-button nz-dropdown>bottomRight</button>
  37.         <ul nz-menu>
  38.           <li nz-menu-item>
  39.             <a>1st menu item length</a>
  40.           </li>
  41.           <li nz-menu-item>
  42.             <a>2nd menu item length</a>
  43.           </li>
  44.           <li nz-menu-item>
  45.             <a>3rd menu item length</a>
  46.           </li>
  47.         </ul>
  48.       </nz-dropdown>
  49.       <nz-dropdown [nzPlacement]="'topLeft'">
  50.         <button nz-button nz-dropdown>topLeft</button>
  51.         <ul nz-menu>
  52.           <li nz-menu-item>
  53.             <a>1st menu item length</a>
  54.           </li>
  55.           <li nz-menu-item>
  56.             <a>2nd menu item length</a>
  57.           </li>
  58.           <li nz-menu-item>
  59.             <a>3rd menu item length</a>
  60.           </li>
  61.         </ul>
  62.       </nz-dropdown>
  63.       <nz-dropdown [nzPlacement]="'topCenter'">
  64.         <button nz-button nz-dropdown>topCenter</button>
  65.         <ul nz-menu>
  66.           <li nz-menu-item>
  67.             <a>1st menu item length</a>
  68.           </li>
  69.           <li nz-menu-item>
  70.             <a>2nd menu item length</a>
  71.           </li>
  72.           <li nz-menu-item>
  73.             <a>3rd menu item length</a>
  74.           </li>
  75.         </ul>
  76.       </nz-dropdown>
  77.       <nz-dropdown [nzPlacement]="'topRight'">
  78.         <button nz-button nz-dropdown>topRight</button>
  79.         <ul nz-menu>
  80.           <li nz-menu-item>
  81.             <a>1st menu item length</a>
  82.           </li>
  83.           <li nz-menu-item>
  84.             <a>2nd menu item length</a>
  85.           </li>
  86.           <li nz-menu-item>
  87.             <a>3rd menu item length</a>
  88.           </li>
  89.         </ul>
  90.       </nz-dropdown>
  91.     </div>
  92.   `,
  93.   styles: [
  94.     `
  95.       [nz-button] {
  96.         margin-right: 8px;
  97.         margin-bottom: 8px;
  98.       }
  99.     `
  100.   ]
  101. })
  102. export class NzDemoDropdownPlacementComponent {}

Dropdown下拉菜单 - 图7

触发方式

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-dropdown-trigger',
  5.   template: `
  6.     <nz-dropdown [nzTrigger]="'click'">
  7.       <a nz-dropdown> Click me <i nz-icon type="down"></i> </a>
  8.       <ul nz-menu>
  9.         <li nz-menu-item>1st menu item</li>
  10.         <li nz-menu-item>2nd menu item</li>
  11.         <li nz-menu-divider></li>
  12.         <li nz-menu-item nzDisabled>disabled menu item</li>
  13.         <li nz-submenu>
  14.           <span title>sub menu</span>
  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>
  21.           <span title>disabled sub menu</span>
  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>
  29.   `,
  30.   styles: []
  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-dropdown-button (nzClick)="log()">
  8.         DropDown
  9.         <ul nz-menu>
  10.           <li nz-menu-item>1st menu item</li>
  11.           <li nz-menu-item>2nd menu item</li>
  12.           <li nz-submenu>
  13.             <span title>sub menu</span>
  14.             <ul>
  15.               <li nz-menu-item>3rd menu item</li>
  16.               <li nz-menu-item>4th menu item</li>
  17.             </ul>
  18.           </li>
  19.         </ul>
  20.       </nz-dropdown-button>
  21.       <nz-dropdown-button nzDisabled>
  22.         DropDown
  23.         <ul nz-menu>
  24.           <li nz-menu-item>
  25.             <a>1st menu item</a>
  26.           </li>
  27.           <li nz-menu-item>
  28.             <a>2nd menu item</a>
  29.           </li>
  30.           <li nz-menu-item>
  31.             <a>3rd menu item</a>
  32.           </li>
  33.         </ul>
  34.       </nz-dropdown-button>
  35.       <nz-dropdown>
  36.         <button nz-button nz-dropdown><span>Button</span> <i nz-icon type="down"></i></button>
  37.         <ul nz-menu>
  38.           <li nz-menu-item>
  39.             <a>1st menu item</a>
  40.           </li>
  41.           <li nz-menu-item>
  42.             <a>2nd menu item</a>
  43.           </li>
  44.           <li nz-menu-item>
  45.             <a>3rd menu item</a>
  46.           </li>
  47.         </ul>
  48.       </nz-dropdown>
  49.     </div>
  50.   `,
  51.   styles: [
  52.     `
  53.       nz-dropdown-button {
  54.         margin-right: 8px;
  55.       }
  56.     `
  57.   ]
  58. })
  59. export class NzDemoDropdownDropdownButtonComponent {
  60.   log(): void {
  61.     console.log('click dropdown button');
  62.   }
  63. }

Dropdown下拉菜单 - 图9

菜单隐藏方式

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-dropdown-overlay-visible',
  5.   template: `
  6.     <nz-dropdown [nzClickHide]="false" [(nzVisible)]="visible">
  7.       <a nz-dropdown> Hover me <i nz-icon type="down"></i> </a>
  8.       <ul nz-menu>
  9.         <li nz-menu-item>Clicking me will not close the menu.</li>
  10.         <li nz-menu-item>Clicking me will not close the menu also.</li>
  11.         <li nz-menu-item (click)="visible = false">Clicking me will close the menu</li>
  12.       </ul>
  13.     </nz-dropdown>
  14.   `,
  15.   styles: []
  16. })
  17. export class NzDemoDropdownOverlayVisibleComponent {
  18.   visible = false;
  19. }

API

单独引入此组件

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

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

nz-dropdowncomponent

需要在触发下拉菜单的元素上加入 [nz-dropdown] 标记用于定位元素位置

参数说明类型默认值
[nzDisabled]菜单是否禁用boolean-
[nzPlacement]菜单弹出位置'bottomLeft'｜'bottomCenter'｜'bottomRight'｜'topLeft'｜'topCenter'｜'topRight''bottomLeft'
[nzTrigger]触发下拉的行为'click'｜'hover''hover'
[nzClickHide]点击后是否隐藏菜单booleantrue
[nzVisible]菜单是否显示，可双向绑定boolean-
[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]directive

用于标定下拉菜单定位元素

nz-dropdown-buttoncomponent

参数说明类型默认值
[nzDisabled]菜单是否禁用boolean-
[nzPlacement]菜单弹出位置'bottomLeft'｜'bottomCenter'｜'bottomRight'｜'topLeft'｜'topCenter'｜'topRight''bottomLeft'
[nzSize]按钮大小，和 nz-button 一致'large'｜'small'｜'default''default'
[nzType]按钮类型，和 nz-button 一致'primary'｜'ghost'｜'dashed'｜'danger'｜'default''default'
[nzTrigger]触发下拉的行为'click'｜'hover''hover'
[nzClickHide]点击后是否隐藏菜单booleantrue
[nzVisible]菜单是否显示boolean-
(nzVisibleChange)菜单显示状态改变时调用，参数为 nzVisibleEventEmitter<boolean>-
(nzClick)点击左侧按钮的回调EventEmitter<MouseEvent>-

NzDropdownServiceservice

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

参数说明参数返回
create创建右键菜单($event:MouseEvent, template:TemplateRef<void>)NzDropdownContextComponent
close关闭右键菜单--