Dropdown下拉菜单

向下弹出的列表。

何时使用

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

单独引入此组件

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

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

代码演示

Dropdown下拉菜单 - 图1

基本

最简单的下拉菜单。

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

Dropdown下拉菜单 - 图2

其他元素

分割线和不可用菜单项。

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

Dropdown下拉菜单 - 图3

触发事件

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

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

Dropdown下拉菜单 - 图4

多级菜单

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-dropdown-sub-menu',
  4. template: `
  5. <a nz-dropdown [nzDropdownMenu]="menu" (nzVisibleChange)="change($event)">
  6. Cascading menu
  7. <i nz-icon nzType="down"></i>
  8. </a>
  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-submenu nzTitle="sub menu">
  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. <li nz-submenu nzDisabled nzTitle="disabled sub menu">
  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-menu>
  27. `
  28. })
  29. export class NzDemoDropdownSubMenuComponent {
  30. change(value: boolean): void {
  31. console.log(value);
  32. }
  33. }

Dropdown下拉菜单 - 图5

右键菜单

在区域内任意右击触发。

  1. import { Component } from '@angular/core';
  2. import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd';
  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>
  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: rgb(190, 200, 200);
  33. padding: 32px;
  34. text-align: center;
  35. }
  36. .context-intro {
  37. color: #fff;
  38. font-size: 14px;
  39. }
  40. `
  41. ]
  42. })
  43. export class NzDemoDropdownContextMenuComponent {
  44. contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
  45. this.nzContextMenuService.create($event, menu);
  46. }
  47. closeMenu(): void {
  48. this.nzContextMenuService.close();
  49. }
  50. constructor(private nzContextMenuService: NzContextMenuService) {}
  51. }

Dropdown下拉菜单 - 图6

弹出位置

支持 6 个弹出位置。

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

Dropdown下拉菜单 - 图7

触发方式

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-dropdown-trigger',
  4. template: `
  5. <a nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">
  6. Click me
  7. <i nz-icon nzType="down"></i>
  8. </a>
  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-divider></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. })
  31. export class NzDemoDropdownTriggerComponent {}

Dropdown下拉菜单 - 图8

带下拉框的按钮

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-dropdown-dropdown-button',
  4. template: `
  5. <div style="height: 28px;">
  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. </div>
  29. <nz-dropdown-menu #menu1="nzDropdownMenu">
  30. <ul nz-menu>
  31. <li nz-menu-item>menu1 1st menu item</li>
  32. <li nz-menu-item>menu1 2nd menu item</li>
  33. <li nz-menu-item>menu1 3rd menu item</li>
  34. </ul>
  35. </nz-dropdown-menu>
  36. <nz-dropdown-menu #menu2="nzDropdownMenu">
  37. <ul nz-menu>
  38. <li nz-menu-item>menu2 1st menu item</li>
  39. <li nz-menu-item>menu2 2nd menu item</li>
  40. <li nz-menu-item>menu2 3rd menu item</li>
  41. </ul>
  42. </nz-dropdown-menu>
  43. <nz-dropdown-menu #menu3="nzDropdownMenu">
  44. <ul nz-menu>
  45. <li nz-menu-item>menu3 1st menu item</li>
  46. <li nz-menu-item>menu3 2nd menu item</li>
  47. <li nz-menu-item>menu3 3rd menu item</li>
  48. </ul>
  49. </nz-dropdown-menu>
  50. <nz-dropdown-menu #menu4="nzDropdownMenu">
  51. <ul nz-menu>
  52. <li nz-menu-item>menu4 1st menu item</li>
  53. <li nz-menu-item>menu4 2nd menu item</li>
  54. <li nz-menu-item>menu4 3rd menu item</li>
  55. </ul>
  56. </nz-dropdown-menu>
  57. `,
  58. styles: [
  59. `
  60. nz-button-group {
  61. margin-right: 8px;
  62. }
  63. `
  64. ]
  65. })
  66. export class NzDemoDropdownDropdownButtonComponent {
  67. log(): void {
  68. console.log('click dropdown button');
  69. }
  70. }

Dropdown下拉菜单 - 图9

菜单隐藏方式

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

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

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-
[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关闭右键菜单--