Question

我在根页面的标题（工具栏）位置遇到以下问题：

https://i.imgur.com/R27IXx3.jpg

为什么标题根页面位于选项卡上方？我需要将它们放在子页面中。

代码非常简单：

 tabs.html

<ion-tabs tabsPlacement="top" tabsLayout="icon-bottom" tabsHighlight=true>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
 <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"> 
 </ion-tab>
 <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>


tab1Root (home.html)

<ion-header>
<ion-toolbar>
   <div >
      <small> 
        this is the toolbar ...
      </small>
    </div>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content padding>
  <h2>Welcome to Ionic!</h2>
 <p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
 Take a look at the <code>src/pages/</code> directory to add or change tabs,
 update any existing page or create new pages.
  </p>
 </ion-content>

谢谢。

Answer 1

因为您已将<ion-toolbar>放在<ion-header>内，这会将其放置在屏幕的顶部（标题）。请参阅离子工具栏docs。

尝试将其放在<ion-content>中。

<ion-content>

  <ion-toolbar>
    <ion-title>this is the toolbar ...</ion-title>
  </ion-toolbar>

</ion-content>

离子选项卡-选项卡上方的标题根页面

1 个答案: