Quick Menu
IMPORT MODULE

Quick menu for the implicit auxiliary list on the right.

Examples

Basic Usage

Click the question icon on the right to switch the status menu.

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

@Component({
  selector: 'components-quick-menu-simple',
  template: `
    <button nz-button type="button" (click)="expand = !expand">{{ expand ? '收缩' : '展开' }}</button>
    <quick-menu [(expand)]="expand">
      <nz-list [nzBordered]="false" [nzSplit]="false">
        <nz-list-item><a href="#">Link1</a></nz-list-item>
        <nz-list-item><a href="#">Link2</a></nz-list-item>
        <nz-list-item><a href="#">Link3</a></nz-list-item>
        <nz-list-item><a href="#">Link4</a></nz-list-item>
        <nz-list-item><a href="#">Link5</a></nz-list-item>
      </nz-list>
    </quick-menu>
  `,
})
export class ComponentsQuickMenuSimpleComponent {
  expand = false;
}

API

quick-menu

PropertyDescriptionTypeDefault
[icon]Icon for the quick menustring,TemplateRef<void>question-circle
[top]Icon from topnumber120
[width]Width after openingnumber200
[bgColor]Background for the quick menustring-
[borderColor]Border for the quick menustring-
[expand]Current expand status, double bindingboolean-
(expandChange)Expand status change callbackEventEmitter<boolean>-