タブボタンは存在しますが表示されません

Question

私は2つのタブを持つタブコンポーネントを持っています。ボタンはクリック可能で、ボタンの位置をクリックするとタブの内容は正しく表示されますが、ボタンは見えません。

<ion-header> 
    <ion-navbar> 
    <ion-title>{{coupon.title}}</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <div class="coupon-image-container"> 
    <img src={{coupon.mainImage}}/> 
    <button ion-button class="left">Redeem</button> 
    </div> 
    <ion-tabs class="coupon-tabs"> 
    <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab> 
    <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab> 
    </ion-tabs> 
</ion-content> 

私は他のコードは必要ではないと思いますが、必要に応じてさらに提供します。私が言ったように、mapTabとinfoTabコンポーネントの内容はうまく表示されていますが、タブのボタンをクリックする必要がありますが、ボタンは空白です。

編集：ちょうど誰かが頼むつもりだった場合には、私はそうのようなタブコンポーネント以外のコンポーネントで他のすべてを削除した場合、それはまだ同じことを行います

<ion-tabs class="coupon-tabs"> 
    <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab> 
    <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab> 
</ion-tabs> 

だから、それは間違いなくに何もしています他のコンテンツとやり取りします。

編集：私は、問題を示すGIFを作った：http://g.recordit.co/WDkjkSz6re.gif

編集：あなたがこれを行った後

<ion-tab icon="ion-map" title="Map"></ion-tab> 
<ion-tab icon="ion-ios-information" title="Info"></ion-tab> 

：ここではスタイルが

イオンタブ上にある

element.style { 
} 
main.css:25224 
.coupon-tabs ion-tab { 
    color: black; 
    top: 56px; 
} 
main.css:5136 
ion-tab.show-tab { 
    display: block; 
} 
main.css:5145 
ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page { 
    contain: strict; 
} 
main.css:5132 
ion-tab { 
    display: none; 
} 
main.css:5128 
ion-nav, ion-tab, ion-tabs { 
    overflow: hidden; 
} 
main.css:5116 
ion-app, ion-nav, ion-tab, ion-tabs, .app-root { 
    left: 0; 
    top: 0; 
    position: absolute; 
    z-index: 0; 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

main.css:4986 
* { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
    -webkit-tap-highlight-color: transparent; 
    -webkit-touch-callout: none; 
} 
Inherited from ion-tabs.coupon-tabs.tabs.tabs-md.tabs-md-primary 
main.css:25219 
.coupon-tabs { 
    position: relative; 
    color: black; 
} 
main.css:4986 
* { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
    -webkit-tap-highlight-color: transparent; 
    -webkit-touch-callout: none; 
} 

Answer 1

代わりにこれを行いますテキストは表示されますが、アイコンの下にあり、overflowによって隠されていますが、テキストは表示されないことに気づいたかもしれません。 position: relative; top: -XXpxでテキストを少し上に移動するか、親にするoverflow: visibleとする必要があります。あなたはtypescriptでプロジェクトをビルドしていない場合

私は問題がtabTitleだったとtabIconは、上記の例に適切に翻訳されていなかったか、あなたは私たちがtypescriptでこのプロジェクトを構築している場合、それはに属性を変換するのに失敗したと思うの適切な方法。

I saw some other issues in google related to this

Answer 2

クラス.tabbarを探し、その不透明度を確認することができます

希望。必要に応じて変更してください。