按钮

Question

我已经完成了100多个时间，它按预期工作，但只是这种情况。

popover看起来像：

<ion-content style="padding:5px">
  <ion-label class="menu-options-link" (click)="doneTask()">Accept New Leads</ion-label>
</ion-content>

启动popover的页面如下所示：

<ion-card class="dashboard-widget-layout dashboard-widget">
  <ion-card-header class="dashboard-widget-card-header">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-label class="dashboard-widget-header">New Leads</ion-label>
        </ion-col>
        <ion-col col-auto>
          <ion-icon name="ios-more" style="zoom:1.5"

（点击）= “showOptions（$事件）” ＆GT;                                 
           

启动ts是

showOptions(myEvent){
  //alert('hey')
  var popover = this.leadOptionsPopup.create(LeadOptionsPage, {}, { cssClass: 'options-popover'});    
  popover.present({
    ev: myEvent
  }); 
}

这应该这样做但是弹出窗口相对于图标只是偏离了。

Answer 1

为什么不使用ion-item而不是ion-card-header来复杂网格。

<ion-card class="dashboard-widget-layout dashboard-widget">

    <ion-item>
      New Leads
      <ion-icon name="ios-more" item-end (click)="showOptions($event)"></ion-icon>
    </ion-item>

</ion-card>

检查documentation here，它会显示一张卡片，其中有一个项目作为起始卡元素。

请检查这个class="dashboard-widget-card-header"是否正在做一些事情以及popover函数中的那个：options-popover。

Answer 2

因此，基于尝试@ Sonicd300建议的替代布局，我最终理解了罪魁祸首。它实际上是图标样式属性zoom：1.5。我不知道为什么它弄乱了弹出位置但是将其移除或将其设置为1.0会使弹出窗口移动到正确的位置

Answer 3

如果您希望弹出按钮位于te按钮旁边，请将事件传递给函数create（），如下所示

// home.html

<button ion-button icon-only (click)="presentRadioPopover($event)">
        <ion-icon name="more"></ion-icon>
 </button>

// home.ts

 presentRadioPopover(event) {
    const popover = this.popoverCtrl.create(HomepopoverPage);
    popover.present({
      ev: event
    });
  }

ps：离子3

Answer 4

在离子5中

使用@TaioliFrancesco示例，

home.html

<ion-button (click)="presentRadioPopover($event)">
  <ion-icon name="more" slot="icon-only"></ion-icon>
</ion-button>

home.ts

async presentRadioPopover(ev: any) {
  const popover = await this.popoverCtrl.create({
    component: HomepopoverPage,
    event: ev,
  });
  
  return await popover.present();
}