<IonFab> 元素位于屏幕之外

Question

我正在使用 Ionic 4 并设置了 React。

ionic start myapp --type=react

我正在尝试向应用程序添加一个简单的 Fab 按钮，将其放置在屏幕的右下角：

ionic start myapp --type=react

然而，这会导致按钮稍微可见，而大部分按钮都在屏幕之外。

当我查看devTools 中的元素和样式面板时，我注意到该元素遵循以下规则：

<IonFab vertical="bottom" horizontal="end" slot="fixed">
  <IonFabButton onClick={()=>{props.history.push("/add")}}>
    <IonIcon icon={add} />
  </IonFabButton>
</IonFab>

这解释了我从按钮的几个像素得到的视图。这是 Ionic 4 的问题还是我在这里做错了什么？

---

完整组件：

:host(.fab-vertical-bottom) {
    bottom: 10px;
}

Answer 1

感谢您分享您的组件和重现步骤。

所以这看起来像是一个错误，原因是 fab 位移是由 IonHeader 元素引起的。但有一些解决方法，并且不久前通过非黑客解决方案解决了此错误的问题。首先，您实际上可以将 fab 设计为固定元素

ion-fab {
  position: fixed;
}

我不喜欢这种情况，而且通常会被警告不要这样做，但在您的用例中，它实际上是有意义的，因为您的元素与 DOM 的常规流程是分开的。

或者您可以将内容包装在 IonPage 元素中，这更有意义，因为它与框架相关。这有点奇怪，因为我没有看到文档中引用的 IonPage 元素，就像您看到 IonContent 等其他结构组件一样

return (
    <IonPage>
       <IonHeader>
          <IonToolbar>
            ...
          </IonToolbar>
        </IonHeader>
      <IonContent>
        ...
        <IonFab vertical="bottom" horizontal="center" slot="fixed">
          <IonFabButton>
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );