快速菜单
IMPORT MODULE

快速菜单,用于右侧隐式辅助列表。

代码演示

基础样例

点击右侧问号切换状态菜单。

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

import { QuickMenuComponent } from '@delon/abc/quick-menu';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzListModule } from 'ng-zorro-antd/list';

@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>
  `,
  standalone: true,
  imports: [NzButtonModule, QuickMenuComponent, NzListModule]
})
export class ComponentsQuickMenuSimpleComponent {
  expand = false;
}

API

quick-menu

成员说明类型默认值
[icon]图标string,TemplateRef<void>question-circle
[top]距离顶部number120
[width]打开后宽度number200
[bgColor]背景string-
[borderColor]边框颜色string-
[expand]当前展开状态,可双向绑定boolean-
(expandChange)当前展开状态改变回调函数EventEmitter<boolean>-
Loading...