如何制作离子弹出式以显示扳机上方？

Question

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

<!-- 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

Answer 1

我相信您正在寻找这样的东西。
您可以在这里找到更多有关它的信息： https：//ionicframework.com/docs/docs/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中的增长方向，但似乎不是本地属性（我猜是增长“属性”相对于可用的空间而言）。

edit2 ： https://forum.ionicframework.com/t/popover-open-to-top-top-top-apperaining-creen-screen-on-on-on-bottom-n-bottom-ofm-a-page/219612/

Answer 2

在某些特定情况下（某些特定元素用作触发器），这似乎是一个离子 - 流行的错误。它不正确地理解侧面=“ top”属性...

一个解决方法，是在弹出元件上使用-offset-y CSS属性，并根据自己喜欢的像素将其移动它在屏幕上。

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

CSS

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

当然可以将125px更改为适合您菜单的任何东西。