<IonFab> 元素位于屏幕外

Question

我正在使用 Ionic 4 和 React 设置。

ionic start myapp --type=react

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

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

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

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

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

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

完整组件：

import { IonContent, IonHeader, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonButtons, IonBackButton } from '@ionic/react';
import React from 'react';
import { RouteComponentProps } from 'react-router';

/* Icons */
import {add} from 'ionicons/icons';

const AddItem: React.FunctionComponent<RouteComponentProps> = (props) => {
  return (
    <>
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start" >
              <IonBackButton defaultHref="/home"/>
            </IonButtons>
            <IonTitle>Add Item</IonTitle>
          </IonToolbar>
        </IonHeader>
      <IonContent className="ion-padding">
          <h1>blablablabla</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus soluta illum sit asperiores, debitis quia magnam non pariatur dignissimos necessitatibus labore ratione obcaecati nesciunt nam accusantium sequi! Doloribus, nulla ipsam.
          </p>
          <IonFab vertical="bottom" horizontal="end" slot="fixed">
            <IonFabButton onClick={()=>{props.history.push("/add")}}>
              <IonIcon icon={add} />
            </IonFabButton>
          </IonFab>
      </IonContent>
    </>
  );
};

export default AddItem;

Answer 1

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

所以这似乎是一个错误，原因是 fab 位移是由 IonHeader 元素引起的。但是有一些变通办法，并且不久前使用非 hacky 解决方案关闭了此错误的 issue。首先，您实际上可以将 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>
  );

<IonFab> 元素位于屏幕外

<IonFab> element is position outside of screen

reactjs

ionic-framework

ionic4