Используйте вкладки внизу и вверху на одной странице. Ioni c 4

Question

Я хотел бы достичь положения вкладок вверху и внизу на одной странице в окне c 4. На данный момент любой из них работает в одном компоненте / странице.

Answer 1

Вы можете сделать это, просто добавив еще одну панель вкладок ion, чтобы один занятый «верхний» слот и другой «нижний» слот:

<ion-tabs>

  <ion-tab-bar slot="top">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab4">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab Four</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab5">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Five</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Затем убедитесь, что вы настроили маршрутизацию правильно внутри tabs.router.module

https://stackblitz.com/edit/ionic4-angular-tabs-template-rag89y