Tab-Schaltflächen existieren, sind aber nicht sichtbar

Question

Ich habe eine Tab-Komponente mit zwei Tabs. Die Schaltflächen sind anklickbar, und wenn Sie auf die Schaltflächen klicken, werden die Registerkarteninhalte zwar korrekt angezeigt, die Schaltflächen sind jedoch nicht sichtbar.

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

Ich glaube nicht, dass ein anderer Code notwendig ist, aber ich werde mehr zur Verfügung stellen, wenn nötig. Wie ich schon sagte, die Inhalte der mapTab und infoTab Komponenten sind in Ordnung, und klicken Sie auf, wo die Tab-Tasten sein sollte, ist zwischen ihnen wechseln, aber die Tasten sind nur leer weiß.

Edit: Nur falls jemand fragen würde, tut es immer noch die gleiche Sache, wenn ich alles andere in der Komponente mit Ausnahme der Komponente Registerkarte entfernen, wie so:

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

Also auf jeden Fall hat es nichts zu mit dem anderen Inhalt machen.

Edit: habe ich eine gif zeigt das Problem: http://g.recordit.co/WDkjkSz6re.gif

Edit: Hier die Stile auf Ion-Tab ist

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

diese stattdessen tun:

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

, nachdem Sie dies tun Sie haben vielleicht bemerkt, dass der Text nicht erscheint, obwohl der Text zwar angezeigt wurde, aber weit unterhalb des Symbols lag und von overflow ausgeblendet wurde. Möglicherweise müssen Sie den Text mit position: relative; top: -XXpx ein wenig höher verschieben oder übergeordnete overflow: visible erstellen.

Wenn Sie das Projekt nicht mit typescript Aufbau denke ich das Problem war tabTitle und tabIcon wurde nicht richtig auf das obige Beispiel übersetzt oder Wenn Sie bauen wir dieses Projekt mit typescript dann scheitert es die Attribute seiner übersetzen richtige Weg.

Hoffnung, die

I saw some other issues in google related to this

Answer 2

Suchen Sie nach Klasse .tabbar und überprüfen Sie die Opazität hilft. Ändern Sie es bei Bedarf.