टैब बटन मौजूद हैं लेकिन

Question

दिखाई नहीं दे रहे हैं मेरे पास दो टैब के साथ एक टैब घटक है। बटन क्लिक करने योग्य हैं, और बटन कहां होना चाहिए पर क्लिक करना सही ढंग से टैब सामग्री प्रदर्शित कर रहा है, लेकिन बटन अदृश्य हैं।

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

तो यह निश्चित रूप से कुछ भी नहीं करना पड़ता है: बस में मामला किसी से पूछना जा रहा था, यह अभी भी एक ही बात करता है, तो मैं बहुत तरह टैब घटक के अलावा घटक में सब कुछ को दूर करता है अन्य सामग्री के साथ करो।

संपादित करें: http://g.recordit.co/WDkjkSz6re.gif

संपादित करें:: यहाँ आयन टैब पर शैलियों है

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

बजाय ऐसा करते हैं:

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

आप यह कर के बाद मैं इस समस्या को दर्शाने वाला एक gif बनाया आपने देखा होगा कि टेक्स्ट प्रकट नहीं होता है, हालांकि टेक्स्ट दिखाई देता था लेकिन यह आइकन के नीचे था और overflow से छुपा था। आपको position: relative; top: -XXpx के साथ टेक्स्ट को थोड़ा अधिक स्थानांतरित करने की आवश्यकता हो सकती है या पैरेंट overflow: visible बना सकते हैं।

आप typescript के साथ इस परियोजना के निर्माण नहीं कर रहे हैं मुझे लगता है कि इस मुद्दे को tabTitle था और tabIcon ऊपर के उदाहरण के लिए ठीक से अनुवादित नहीं किया गया था या आप हम typescript के साथ इस परियोजना का निर्माण कर रहे हैं तो यह करने के लिए गुण का अनुवाद करने में विफल रहता है इसके सही तरीका।

आशा व्यक्त की कि मदद करता है वर्ग .tabbar के लिए

I saw some other issues in google related to this

Answer 2

देखो और उसके अस्पष्टता की जाँच करें। यदि आवश्यक हो तो इसे बदलें।