Dropdown下拉菜单

向下弹出的列表。

何时使用#

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

代码演示

最简单的下拉菜单。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-basic',
  template: `
    <nz-dropdown>
      <a nz-dropdown> Hover me <i nz-icon type="down"></i> </a>
      <ul nz-menu nzSelectable>
        <li nz-menu-item>
          <a>1st menu item</a>
        </li>
        <li nz-menu-item>
          <a>2nd menu item</a>
        </li>
        <li nz-menu-item>
          <a>3rd menu item</a>
        </li>
      </ul>
    </nz-dropdown>
  `,
  styles: []
})
export class NzDemoDropdownBasicComponent {}

分割线和不可用菜单项。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-item',
  template: `
    <nz-dropdown>
      <a nz-dropdown> Hover me <i nz-icon type="down"></i> </a>
      <ul nz-menu>
        <li nz-menu-item>
          <a>1st menu item</a>
        </li>
        <li nz-menu-item>
          <a>2nd menu item</a>
        </li>
        <li nz-menu-divider></li>
        <li nz-menu-item nzDisabled>3rd menu item(disabled)</li>
      </ul>
    </nz-dropdown>
  `,
  styles: []
})
export class NzDemoDropdownItemComponent {}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-event',
  template: `
    <nz-dropdown>
      <a nz-dropdown> Hover me, Click menu item <i nz-icon type="down"></i> </a>
      <ul nz-menu>
        <li nz-menu-item (click)="log('1st menu item')">1st menu item</li>
        <li nz-menu-item (click)="log('2nd menu item')">2nd menu item</li>
        <li nz-menu-item (click)="log('3rd menu item')">3rd menu item</li>
      </ul>
    </nz-dropdown>
  `,
  styles: []
})
export class NzDemoDropdownEventComponent {
  log(data: string): void {
    console.log(data);
  }
}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-sub-menu',
  template: `
    <nz-dropdown (nzVisibleChange)="change($event)">
      <a nz-dropdown> Cascading menu <i nz-icon type="down"></i> </a>
      <ul nz-menu>
        <li nz-menu-item>1st menu item</li>
        <li nz-menu-item>2nd menu item</li>
        <li nz-submenu>
          <span title>sub menu</span>
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
        <li nz-submenu nzDisabled>
          <span title>disabled sub menu</span>
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
      </ul>
    </nz-dropdown>
  `,
  styles: []
})
export class NzDemoDropdownSubMenuComponent {
  change(value: boolean): void {
    console.log(value);
  }
}
Context Menu

在区域内任意右击触发。

expand codeexpand code
import { Component, TemplateRef } from '@angular/core';
import { NzDropdownContextComponent, NzDropdownService, NzMenuItemDirective } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-dropdown-context-menu',
  template: `
    <div
      style="background: rgb(190, 200, 200); padding: 32px;text-align: center"
      (contextmenu)="contextMenu($event, template)"
    >
      <ng-template #template>
        <ul nz-menu nzInDropDown (nzClick)="close($event)">
          <li nz-menu-item>1st menu item</li>
          <li nz-menu-item>2nd menu item</li>
          <li nz-menu-item nzDisabled>disabled menu item</li>
          <li nz-submenu>
            <span title>sub menu</span>
            <ul>
              <li nz-menu-item>3rd menu item</li>
              <li nz-menu-item>4th menu item</li>
            </ul>
          </li>
          <li nz-submenu nzDisabled>
            <span title>disabled sub menu</span>
            <ul>
              <li nz-menu-item>3rd menu item</li>
              <li nz-menu-item>4th menu item</li>
            </ul>
          </li>
        </ul>
      </ng-template>
      <span style="color:#fff;font-size: 14px;">Context Menu</span>
    </div>
  `,
  styles: []
})
export class NzDemoDropdownContextMenuComponent {
  private dropdown: NzDropdownContextComponent;

  contextMenu($event: MouseEvent, template: TemplateRef<void>): void {
    this.dropdown = this.nzDropdownService.create($event, template);
  }

  close(e: NzMenuItemDirective): void {
    console.log(e);
    this.dropdown.close();
  }

  constructor(private nzDropdownService: NzDropdownService) {}
}

支持 6 个弹出位置。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-placement',
  template: `
    <div>
      <nz-dropdown [nzPlacement]="'bottomLeft'">
        <button nz-button nz-dropdown>bottomLeft</button>
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item length</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item length</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item length</a>
          </li>
        </ul>
      </nz-dropdown>
      <nz-dropdown [nzPlacement]="'bottomCenter'">
        <button nz-button nz-dropdown>bottomCenter</button>
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item length</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item length</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item length</a>
          </li>
        </ul>
      </nz-dropdown>
      <nz-dropdown [nzPlacement]="'bottomRight'">
        <button nz-button nz-dropdown>bottomRight</button>
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item length</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item length</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item length</a>
          </li>
        </ul>
      </nz-dropdown>
      <nz-dropdown [nzPlacement]="'topLeft'">
        <button nz-button nz-dropdown>topLeft</button>
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item length</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item length</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item length</a>
          </li>
        </ul>
      </nz-dropdown>
      <nz-dropdown [nzPlacement]="'topCenter'">
        <button nz-button nz-dropdown>topCenter</button>
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item length</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item length</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item length</a>
          </li>
        </ul>
      </nz-dropdown>
      <nz-dropdown [nzPlacement]="'topRight'">
        <button nz-button nz-dropdown>topRight</button>
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item length</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item length</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item length</a>
          </li>
        </ul>
      </nz-dropdown>
    </div>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoDropdownPlacementComponent {}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-trigger',
  template: `
    <nz-dropdown [nzTrigger]="'click'">
      <a nz-dropdown> Click me <i nz-icon type="down"></i> </a>
      <ul nz-menu>
        <li nz-menu-item>1st menu item</li>
        <li nz-menu-item>2nd menu item</li>
        <li nz-menu-divider></li>
        <li nz-menu-item nzDisabled>disabled menu item</li>
        <li nz-submenu>
          <span title>sub menu</span>
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
        <li nz-submenu nzDisabled>
          <span title>disabled sub menu</span>
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
      </ul>
    </nz-dropdown>
  `,
  styles: []
})
export class NzDemoDropdownTriggerComponent {}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-dropdown-button',
  template: `
    <div style="height: 28px;">
      <nz-dropdown-button (nzClick)="log()">
        DropDown
        <ul nz-menu>
          <li nz-menu-item>1st menu item</li>
          <li nz-menu-item>2nd menu item</li>
          <li nz-submenu>
            <span title>sub menu</span>
            <ul>
              <li nz-menu-item>3rd menu item</li>
              <li nz-menu-item>4th menu item</li>
            </ul>
          </li>
        </ul>
      </nz-dropdown-button>
      <nz-dropdown-button nzDisabled>
        DropDown
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item</a>
          </li>
        </ul>
      </nz-dropdown-button>
      <nz-dropdown>
        <button nz-button nz-dropdown><span>Button</span> <i nz-icon type="down"></i></button>
        <ul nz-menu>
          <li nz-menu-item>
            <a>1st menu item</a>
          </li>
          <li nz-menu-item>
            <a>2nd menu item</a>
          </li>
          <li nz-menu-item>
            <a>3rd menu item</a>
          </li>
        </ul>
      </nz-dropdown>
    </div>
  `,
  styles: [
    `
      nz-dropdown-button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoDropdownDropdownButtonComponent {
  log(): void {
    console.log('click dropdown button');
  }
}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-dropdown-overlay-visible',
  template: `
    <nz-dropdown [nzClickHide]="false" [(nzVisible)]="visible">
      <a nz-dropdown> Hover me <i nz-icon type="down"></i> </a>
      <ul nz-menu>
        <li nz-menu-item>Clicking me will not close the menu.</li>
        <li nz-menu-item>Clicking me will not close the menu also.</li>
        <li nz-menu-item (click)="visible = false">Clicking me will close the menu</li>
      </ul>
    </nz-dropdown>
  `,
  styles: []
})
export class NzDemoDropdownOverlayVisibleComponent {
  visible = false;
}

API#

单独引入此组件#

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

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

nz-dropdown#

需要在触发下拉菜单的元素上加入 [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]#

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

nz-dropdown-button#

参数说明类型默认值
[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>-

NzDropdownService#

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

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