शीर्ष पर आयनिक 2 टैब और नीचे

Question

मैं tabs component बनाना चाहता हूं जिसमें स्क्रीन के शीर्ष में कुछ टैब हैं और कुछ नीचे हैं, क्या यह हासिल करने का कोई तरीका है?

कुछ इस तरह:

मैं दो उदाहरणों का उपयोग करने की कोशिश की लेकिन मैं यह नहीं कर सकता है और मुझे लगता है कि यह उन दोनों के बीच सिंक्रनाइज़ करने के लिए बहुत मुश्किल हो वाला है।

कोई विचार?

Answer 1

आप कुछ Segment घटकों इस तरह के साथ एक टैब लेआउट (तल पर टैब) गठबंधन और प्रत्येक पेज के शीर्ष पर एक उपकरण पट्टी जोड़ सकते हैं:

<ion-header> 
    <ion-toolbar> 
    <ion-segment [(ngModel)]="topTab" color="secondary"> 
     <ion-segment-button value="camera"> 
     <ion-icon name="camera"></ion-icon> 
     </ion-segment-button> 
     <ion-segment-button value="bookmark"> 
     <ion-icon name="bookmark"></ion-icon> 
     </ion-segment-button> 
    </ion-segment> 
    </ion-toolbar> 
</ion-header> 

इस तरह आप पर टैब होगा नीचे (टैब घटक) और शीर्ष पर टैब (सेगमेंट के साथ शीर्षलेख)। मुझे नहीं पता कि यह आपके ऐप के संदर्भ में समझ में आता है, लेकिन यूआई के संदर्भ में परिणाम प्रदान किए गए स्क्रीनशॉट के समान ही होगा।

Answer 2

आप अपने पृष्ठ के शीर्ष पर टैबस्कंपोनेंट भी प्राप्त कर सकते हैं। यह मानते हुए कि आप आयातित और TabsComponent घोषित आपको बस इतना करना है, तो अपने app.module.ts को यह विशेषता जोड़ रहा है

imports: [ 
IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'}) 
], 

यह वास्तव में केवल आप टैब्स बार की स्थिति को बदलने के लिए की सुविधा देता है है।

Answer 3

आप आयोनिक 2 या 3 का उपयोग कर रहे हैं, तो यहाँ रास्ता

1. ओपन src\app\app.module.ts फ़ाइल onicModule.forRoot() कार्य करने के लिए एक वस्तु के रूप में मूल्य
2. पास tabsPlacement:'bottom' है।
3. दूसरे ऑब्जेक्ट के रूप में ऑब्जेक्ट पास करें।
4. शीर्ष
   पर दिखाई देने के लिए के स्थान पर 'top' का उपयोग कर सकते हैं आशा है कि यह आपके लिए काम करेगा !!!

कोड source here।