2017-08-22 24 views
8

İki sekmeli bir sekme bileşenim var. Düğmeler tıklanabilir ve düğmelerin nerede olması gerektiğine tıklandığında sekme içeriğinin doğru görüntüleniyor, ancak düğmeler görünmez.Sekme düğmeleri var ancak görünmüyor

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

Başka bir kodun gerekli olduğunu düşünmüyorum ama gerekirse daha fazlasını sağlayacağım. mapTab ve infoTab bileşenlerinin içeriklerinin iyi gösterildiğini ve sekme düğmelerinin nerede olması gerektiğine tıklayarak dediğim gibi, düğmeler sadece beyazdır.

Düzenleme:

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

yüzden kesinlikle hiçbir şey vardır: Öyle gibi sekme bileşeni hariç bileşende her şeyi kaldırırsanız vaka birisi soracaktım Sadece içeri, hala aynı şeyi yapar diğer içerikle yap.

Düzenleme: http://g.recordit.co/WDkjkSz6re.gif

Düzenleme: Burada iyon sekmesinde stilleri var

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; 
} 
+0

belki kupon sekmeleri sınıfı? –

+0

@ZhangBruce Bu, henüz üzerinde herhangi bir özellik ayarlanmamış. – chrispytoes

+0

Bu garip, bende aynı kod var ama iyon-sekmelerde bir renk = "beyaz" öznitelikleri –

cevap

0

yerine bunu:

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

Bunu yaptıktan sonra ben sorunu gösteren bir gif yapımı Metnin görünmesine rağmen, metnin görünmediğini fark etmiş olabilirsiniz, ancak simgenin altında kalmış ve overflow tarafından gizlenmiştir. Metni, position: relative; top: -XXpx ile biraz daha yükseğe taşımanız veya ebeveyn overflow: visible yapmalısınız. Eğer typescript ile projeyi inşa değilseniz

Ben sorunu tabTitle ve tabIcon Yukarıdaki örneğe uygun şekilde çevrilmiş değildi ya biz typescript ile bu projeyi inşa ediyorsanız o zaman için özelliklerini çevirmek için başarısız tahmin onun doğru yol. sınıf .tabbar için

I saw some other issues in google related to this

+0

kodunuzu ve sekme butonlarını denedim hala boş, ama sekme içeriği artık söylediğin gibi görünmüyor. Bu özellikleri tam olarak değiştirmek için hangi elementlere ihtiyacım var? Ayrıca, sekme görünümü artık çok uzun sürüyor ve ekranın kaymasına neden oluyor ve sekme içerik alanı boş ve yalnızca inceleme öğesinde boş bir boşluk gösteriyor. Ben Typescript kullanıyorum. – chrispytoes

+0

[Ion.ic2 kaynağındaki tab.ts] temel alınarak (https://github.com/ionic-team/ionic/blob/master/src/components/tabs/tab.ts) tabTitle 've tabIcon' doğru olmalıdır tipinde olduğu gibi. tabTitle = "'Bilgi'" tabIcon = "'ion-ios-information'" 'denediniz mi? Daha önce olduğu gibi tırnak işaretleri ile "Info" isminde bir değişken arıyoruz, sadece bir veriyi doğrudan gönderiyorsunuz. – masterpreenz

+0

Sadece oradaki tırnakları eklemeyi denediniz ve hiçbir şey değişmedi. Ve muhtemelen herhalde orada olmalılar çünkü bunlar değişken değil. – chrispytoes

0

bak yardımcı olur ve opaklığını kontrol

umudu. Gerekirse değiştirin.

İlgili konular