Popover气泡

在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。 如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。

代码演示

气泡

import { Component } from '@angular/core';
@Component({
  selector: 'demo-popover-basic',
  template: `
    <Navbar [leftContent]="'Back'" [mode]="'light'" [rightContent]="popover" (onLeftClick)="onLeftClick()">
      NavBar
    </Navbar>
    <ng-template #popover>
      <Icon
        Popover
        [ngStyle]="{ height: '100%', display: 'flex', 'align-items': 'center' }"
        [mask]="true"
        [showArrow]="true"
        [overlay]="overlay"
        [type]="'ellipsis'"
        [placement]="'bottomRight'"
        (onSelect)="onSelect($event)"
        (onVisibleChange)="onVisibleChange($event)"
      ></Icon>
    </ng-template>
    <ng-template #overlay>
      <PopoverItem [icon]="icon1">Scan</PopoverItem>
      <PopoverItem [icon]="icon2" [ngStyle]="{ whiteSpace: 'nowrap' }">My Qrcode</PopoverItem>
      <PopoverItem [icon]="icon3">
        <span [ngStyle]="{ marginRight: 5 }">Help</span>
      </PopoverItem>
    </ng-template>
    <ng-template #icon1>
      <Icon [src]="'https://gw.alipayobjects.com/zos/rmsportal/tOtXhkIWzwotgGSeptou.svg'" [size]="'xs'"></Icon>
    </ng-template>
    <ng-template #icon2>
      <Icon [src]="'https://gw.alipayobjects.com/zos/rmsportal/PKAgAqZWJVNwKsAJSmXd.svg'" [size]="'xs'"></Icon>
    </ng-template>
    <ng-template #icon3>
      <Icon [src]="'https://gw.alipayobjects.com/zos/rmsportal/uQIYTFeRrjPELImDRrPt.svg'" [size]="'xs'"></Icon>
    </ng-template>
  `
})
export class DemoPopoverBasicComponent {
  state = {
    selected: ''
  };
  constructor() {}
  onSelect(event) {
    console.log(event);
  }
  onVisibleChange(event) {
    console.log(event);
  }
  onLeftClick() {
    console.log('onLeftClick');
  }
}

API

Popover

Popover.Item