ヘッダーの下に隠されたイオンタブ

Question

私は多くのページを持つ空のアプリを持っています。これらのページの1つをタブに分割する必要があります。 ヘッダー（ロゴと戻るボタンがあります）の下にいくつかのタブを表示します。 しかし、何らかの理由で、タブはヘッダーの下にほぼ完全に隠されています。

構造は次のとおりです。

<ion-view view-title="MyPage"> 
    <ion-header-bar align-title="center"> 
     <div class="app_header_side"> 
      <button class="button back-button"> 
       <i class="icon ion-ios-arrow-back"></i> 
      </button> 
     </div> 
     <div class="app_header_center"> 
      <div class="text-center"> 
       LOGO 
      </div> 
     </div> 
     <div class="app_header_side"> 
      &nbsp; 
     </div> 
    </ion-header-bar> 
    <ion-content class="padding has-header"> 
     <ion-tabs class="tabs-positive tabs-icon-top"> 
      <ion-tab title="All time" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
       <!-- Tab 1 content --> 
      </ion-tab> 
      <ion-tab title="Month" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
       <!-- Tab 2 content --> 
      </ion-tab> 
      <ion-tab title="Week" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
       <!-- Tab 3 content --> 
      </ion-tab> 
     </ion-tabs> 
    </ion-content> 
</ion-view> 

私はどこでもタブを入れて試してみました。ヘッダーの "ion-view"の前、 "ion-content"の前。何も働かなかった。 TIの仕事をする 唯一の方法は、「イオンコンテンツ」のタグで

style="padding-top: 30px;" 

を追加しました。しかし、私は固定された埋め込みを避けることを好むだろう。

Answer 1

私は次のようにヘッダを宣言することにより、以下のことをお勧めします。その後、

<ion-header-bar class="bar-header"> 

、あなたが設定できるテストとして別has-header

<ion-content class="has-header"> 

を定義する：

<ion-content class="has-subheader"> 

これは、例えばion-nav-barのようなものがth eヘッダーはすでにあります。次にion-header-barをbar-subheaderと設定します。

IONIC Headers and Sub-Headers

Answer 2

別の方法としては、iOSのように同じ下部にタブを配置することができます。

設定$ionicConfigProvider.tabs.position('bottom');

Answer 3

をを.configに私はあなたが私がかつて同じ問題に出くわした

<ion-view view-title="MyPage" class="has-header"> 

を試みるべきだと思います。私は問題を解決したルートビューにclass = "has-header"を使用しました。