Ionic 2 中未显示的选项卡

【问题标题】：Tabs Not Showing in Ionic 2Ionic 2 中未显示的选项卡
【发布时间】：2018-04-02 13:27:50
【问题描述】：

我在模态框内有一个选项卡。我需要在模式中显示 3 个选项卡。但是，它没有出现。它只是出现一个空白。

<ion-header>
    <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="closeModal()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title class="filter">Filter</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-tabs>
  <ion-tab>Hello</ion-tab>
  <ion-tab>Hello</ion-tab>
  <ion-tab>Hello</ion-tab>
</ion-tabs>
</ion-content>

【问题讨论】：

你的问题已经在这里回答了ion tab in model
使用Segments 不是更好的方法吗？或许可以在模态框内使用选项卡，但这听起来像个 hack……
@sebaferreras。是的，我用过。容易得多。谢谢

标签： ionic-framework ionic2 ionic3 ionic-view

【解决方案1】：

您将ion-tabs 放入ion-content。 ion-tabs 是许多 ion-tab 组件的容器，这些组件包含自己的导航堆栈。此容器不能嵌套在ion-content 中，必须是它自己的组件。

<ion-tabs>
  <ion-tab>Hello</ion-tab>
  <ion-tab>Hello</ion-tab>
  <ion-tab>Hello</ion-tab>
</ion-tabs>

从 stackblitz 测试代码here 你可以尝试在离子标签上方有一个公共标题。但是您可能需要为各个页面调整一些 css 以从标题中获得空间。或者您可以为每个单独的页面单独设置标题：

<ion-header>
    <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="closeModal()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title class="filter">Filter</ion-title>
    </ion-navbar>
</ion-header>

在您的标签中。

【讨论】：