Przyciski tabulacyjne istnieją, ale nie są widoczne.

Question

Mam komponent tabulacji z dwiema zakładkami. Przyciski są klikalne, a kliknięcie, gdzie powinny znajdować się przyciski, wyświetla zawartość karty, ale przyciski są niewidoczne.

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

Nie sądzę, że potrzebny jest inny kod, ale w razie potrzeby dostarczę więcej. Tak jak powiedziałem, zawartość komponentów mapTab i infoTab jest wyświetlana poprawnie, a kliknięcie, gdzie powinny znajdować się przyciski tabulacji, przełącza się między nimi, ale przyciski są po prostu puste.

Edit: Na wszelki wypadek, gdyby ktoś jechał zapytać, to nadal robi to samo, jeśli usunąć wszystko inne w składniku wyjątkiem komponentu zakładki tak:

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

więc na pewno nie ma nic wspólnego zrobić z innymi treściami.

Edit: zrobiłem gif pokazujący problem: http://g.recordit.co/WDkjkSz6re.gif

Edycja: Oto style na jonowej karcie

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

to zrobić w zamian:

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

po wykonaniu tej czynności być może zauważyłeś, że tekst się nie pojawia, chociaż tekst się pojawił, ale znajdował się znacznie poniżej ikony i został ukryty przez overflow. Może być konieczne przesunięcie tekstu nieco wyżej o position: relative; top: -XXpx lub utworzenie rodzica overflow: visible.

Jeśli nie budują projekt z typescript Myślę, że problemem był tabTitletabIcon i nie został prawidłowo przetłumaczony na powyższym przykładzie lub Jeżeli budujemy ten projekt z typescript to nie tłumaczyć na jego atrybuty właściwy sposób.

nadzieję, że pomoże

I saw some other issues in google related to this

Answer 2

Look dla klasy .tabbar i sprawdzić jego krycie. W razie potrzeby zmień.