Dropdown下拉菜单

Dropdown下拉菜单

向下弹出的列表。

何时使用

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

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

代码演示

基本

最简单的下拉菜单。

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

其他元素

分割线和不可用菜单项。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-dropdown-item',
  template: `
    <a nz-dropdown [nzDropdownMenu]="menu">
      Hover me
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <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>3rd menu item（disabled）</li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownItemComponent {}

触发事件

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-dropdown-event',
  template: `
    <a nz-dropdown [nzDropdownMenu]="menu">
      Hover me, Click menu item
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <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-menu>
  `
})
export class NzDemoDropdownEventComponent {
  log(data: string): void {
    console.log(data);
  }
}

多级菜单

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

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

右键菜单

在区域内任意右击触发。

import { Component } from '@angular/core';
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
@Component({
  selector: 'nz-demo-dropdown-context-menu',
  template: `
    <div class="context-area" (contextmenu)="contextMenu($event, menu)">
      Right Click on here
    </div>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <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 nzTitle="sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
        <li nz-submenu nzDisabled nzTitle="disabled sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
      </ul>
    </nz-dropdown-menu>
  `,
  styles: [
    `
      .context-area {
        background: #f7f7f7;
        color: #777;
        text-align: center;
        height: 200px;
        line-height: 200px;
      }
    `
  ]
})
export class NzDemoDropdownContextMenuComponent {
  contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
    this.nzContextMenuService.create($event, menu);
  }
  closeMenu(): void {
    this.nzContextMenuService.close();
  }
  constructor(private nzContextMenuService: NzContextMenuService) {}
}

弹出位置

支持 6 个弹出位置。

import { Component } from '@angular/core';
import { NzPlacementType } from 'ng-zorro-antd/dropdown';
@Component({
  selector: 'nz-demo-dropdown-placement',
  template: `
    <div>
      <ng-container *ngFor="let position of listOfPosition">
        <button nz-button nz-dropdown [nzDropdownMenu]="menu" [nzPlacement]="position">{{ position }}</button>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item>1st menu item length</li>
            <li nz-menu-item>2nd menu item length</li>
            <li nz-menu-item>3rd menu item length</li>
          </ul>
        </nz-dropdown-menu>
      </ng-container>
    </div>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoDropdownPlacementComponent {
  listOfPosition: NzPlacementType[] = ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'];
}

触发方式

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-dropdown-trigger',
  template: `
    <a nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">
      Click me
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <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 nzTitle="sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
        <li nz-submenu nzDisabled nzTitle="disabled sub menu">
          <ul>
            <li nz-menu-item>3rd menu item</li>
            <li nz-menu-item>4th menu item</li>
          </ul>
        </li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoDropdownTriggerComponent {}

带下拉框的按钮

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-dropdown-dropdown-button',
  template: `
    <nz-button-group>
      <button nz-button (click)="log()">DropDown</button>
      <button nz-button nz-dropdown [nzDropdownMenu]="menu1" nzPlacement="bottomRight">
        <i nz-icon nzType="ellipsis"></i>
      </button>
    </nz-button-group>
    <nz-button-group>
      <button nz-button (click)="log()">DropDown</button>
      <button nz-button nz-dropdown [nzDropdownMenu]="menu2" nzPlacement="bottomRight">
        <i nz-icon nzType="user"></i>
      </button>
    </nz-button-group>
    <nz-button-group>
      <button nz-button disabled>DropDown</button>
      <button nz-button disabled nz-dropdown [nzDropdownMenu]="menu3" nzPlacement="bottomRight">
        <i nz-icon nzType="ellipsis"></i>
      </button>
    </nz-button-group>
    <button nz-button nz-dropdown [nzDropdownMenu]="menu4">
      Button
      <i nz-icon nzType="down"></i>
    </button>
    <nz-dropdown-menu #menu1="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>menu1 1st menu item</li>
        <li nz-menu-item>menu1 2nd menu item</li>
        <li nz-menu-item>menu1 3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
    <nz-dropdown-menu #menu2="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>menu2 1st menu item</li>
        <li nz-menu-item>menu2 2nd menu item</li>
        <li nz-menu-item>menu2 3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
    <nz-dropdown-menu #menu3="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>menu3 1st menu item</li>
        <li nz-menu-item>menu3 2nd menu item</li>
        <li nz-menu-item>menu3 3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
    <nz-dropdown-menu #menu4="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>menu4 1st menu item</li>
        <li nz-menu-item>menu4 2nd menu item</li>
        <li nz-menu-item>menu4 3rd menu item</li>
      </ul>
    </nz-dropdown-menu>
  `,
  styles: [
    `
      nz-button-group {
        margin: 0 8px 8px 0;
      }
    `
  ]
})
export class NzDemoDropdownDropdownButtonComponent {
  log(): void {
    console.log('click dropdown button');
  }
}

菜单隐藏方式

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-dropdown-overlay-visible',
  template: `
    <a nz-dropdown [nzDropdownMenu]="menu" [nzClickHide]="false" [(nzVisible)]="visible">
      Hover me
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <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-menu>
  `
})
export class NzDemoDropdownOverlayVisibleComponent {
  visible = false;
}

API

[nz-dropdown]directive

参数	说明	类型	默认值
`[nzDropdownMenu]`	Dropdown 下拉菜单组件	`NzDropdownMenuComponent`	-
`[nzDisabled]`	菜单是否禁用	`boolean`	-
`[nzPlacement]`	菜单弹出位置	`‘bottomLeft’ \| ‘bottomCenter’ \| ‘bottomRight’ \| ‘topLeft’ \| ‘topCenter’ \| ‘topRight’`	`‘bottomLeft’`
`[nzTrigger]`	触发下拉的行为	`‘click’ \| ‘hover’`	`‘hover’`
`[nzClickHide]`	点击后是否隐藏菜单	`boolean`	`true`
`[nzVisible]`	菜单是否显示，可双向绑定	`boolean`	-
`[nzBackdrop]`	是否在 `nzTrigger` 为 `click`时增加背景蒙版	`boolean`	`true`
`[nzOverlayClassName]`	下拉根元素的类名称	`string`	-
`[nzOverlayStyle]`	下拉根元素的样式	`object`	-
`(nzVisibleChange)`	菜单显示状态改变时调用，参数为 nzVisible	`EventEmitter<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] 的输入项

<a nz-dropdown [nzDropdownMenu]="menu">Hover me</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item>1st menu item</li>
    <li nz-menu-item>2nd menu item</li>
    <li nz-menu-item>3rd menu item</li>
  </ul>
</nz-dropdown-menu>

NzContextMenuServiceservice

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

方法/属性	说明	参数	返回
create	创建右键菜单	`($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)`	-
close	关闭右键菜单	-	-