Question

我在模态中有一个标签。我需要在模态中显示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>

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

在您的标签页中。

标签不显示在离子2

1 个答案: