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

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