如何使 Ionic 弹出框显示在触发器上方？答案

【问题标题】：How can I make an Ionic popover to show above the trigger?如何使 Ionic 弹出框显示在触发器上方？
【发布时间】：2022-10-18 19:48:22
【问题描述】：

我有一个内联离子弹出框：

<!-- Show popover above trigger -->
<ion-button id="button">Demo</ion-button>
<ion-popover trigger="button" side="top">
  <ng-template>
    <ion-content>
      <ion-item>
        <ion-label>
          1. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          2. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          3. Test
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          4. Test
        </ion-label>
      </ion-item>
    </ion-content>
  </ng-template>
</ion-popover>

这就是它的样子：

我什至看不到其他项目，因为它们不在屏幕上。所以我想知道是否以及如何使弹出窗口显示在触发器上方。

我试过side="top"。它仅使弹出框从触发器的上角而不是下角开始，似乎没有使弹出框模板出现在触发器上方（在本例中为简单的离子按钮）。

版本信息：

Ionic:

   Ionic CLI                     : 6.19.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.9
   @angular-devkit/build-angular : 14.0.0
   @angular-devkit/schematics    : 13.3.5
   @angular/cli                  : 14.0.0
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.5.1
   @capacitor/android : not installed
   @capacitor/core    : 3.5.1
   @capacitor/ios     : not installed

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.6.0) : 1.5.0

System:

   NodeJS : v16.15.0 (/opt/homebrew/Cellar/node@16/16.15.0/bin/node)
   npm    : 8.5.5
   OS     : macOS Monterey

【问题讨论】：

标签： angular user-interface ionic-framework

【解决方案1】：

我相信你正在寻找这样的东西。
你可以在这里找到更多信息：https://ionicframework.com/docs/api/popover#inline-popover

<!-- Show popover above trigger -->
<ion-button id="side-button">Click to open popover</ion-button>
<ion-popover trigger="side-button" side="top">
  <ng-template>
    <ion-content>Popover Content</ion-content>
  </ng-template>
</ion-popover>

编辑：不是你要找的。也许可以在 css 中强制增长方向，但它似乎不是本机属性（我猜增长“属性”是相对于向下可用空间的）。

编辑2：https://forum.ionicframework.com/t/popover-open-to-top-appearing-off-screen-on-bottom-of-a-page/219612/

【讨论】：

除了我以编程方式调用本方法之外，我看不出您发布的内容与我所发布的内容有何不同。我确实阅读了文档。现在内容离开屏幕。 :| I guess the grow "property" is relative to the space available downward 是什么意思？我希望弹出窗口显示触发器上方。
嘿，对不起，我弄错了。经过几次研究，这似乎是已经向 ionic 团队报告的问题。使用修复github.com/ionic-team/ionic-framework/issues/24870 的线程链接更新了答案

【解决方案2】：

在某些特定情况下（某些特定元素用作触发器），这似乎是 ion-popover 的错误。它没有正确理解 side="top" 属性......

一种解决方法是在 popover 元素上使用 --offset-y CSS 属性，并将其向上移动任意数量的像素，以便它在屏幕上。

<ion-popover class="myPopover" trigger="side-button" side="top">

CSS

.myPopover {
  --offset-y: -125px;
}

当然，您可以将 125px 更改为适合您菜单的任何内容。

【讨论】：