आयनिक - टैब्स

Ionic tabsअधिकांश समय मोबाइल नेविगेशन के लिए उपयोग किए जाते हैं। स्टाइलिंग को विभिन्न प्लेटफार्मों के लिए अनुकूलित किया गया है। इसका मतलब यह है कि एंड्रॉइड डिवाइसों पर, टैब को स्क्रीन के शीर्ष पर रखा जाएगा, जबकि IOS पर यह सबसे नीचे होगा। टैब बनाने के विभिन्न तरीके हैं। हम इस अध्याय में टैब बनाने के तरीके के बारे में विस्तार से समझेंगे।

साधारण टैब्स

सरल टैब मेनू के साथ बनाया जा सकता है tabsकक्षा। इस वर्ग का उपयोग करने वाले अंदर के तत्व के लिए, हमें जोड़ने की आवश्यकता हैtab-itemतत्वों। चूंकि टैब आमतौर पर नेविगेशन के लिए उपयोग किया जाता है, इसलिए हम उपयोग करेंगे<a>टैब आइटम के लिए टैग। निम्नलिखित उदाहरण चार टैब के साथ एक मेनू दिखा रहा है।

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

उपरोक्त कोड निम्नलिखित स्क्रीन का उत्पादन करेगा -

प्रतीक जोड़ना

Ionic टैब में आइकन जोड़ने के लिए कक्षाएं प्रदान करता है। यदि आप चाहते हैं कि आपके टैब में बिना किसी टेक्स्ट के आइकन हों, तोtabs-icon-only के बाद वर्ग जोड़ा जाना चाहिए tabsकक्षा। बेशक, आपको उन आइकन को जोड़ना होगा जिन्हें आप प्रदर्शित करना चाहते हैं।

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

उपरोक्त कोड निम्नलिखित स्क्रीन का उत्पादन करेगा -

आप एक साथ आइकन और टेक्स्ट भी जोड़ सकते हैं। tabs-icon-top तथा tabs-icon-leftऐसी कक्षाएं हैं जो क्रमशः ऊपर या बाईं ओर आइकन को रखेंगी। कार्यान्वयन ऊपर दिए गए उदाहरण के समान है, हम बस एक नया वर्ग और पाठ जोड़ देंगे जिसे हम उपयोग करना चाहते हैं। निम्न उदाहरण पाठ के ऊपर रखे गए आइकन दिखाता है।

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

उपरोक्त कोड निम्नलिखित स्क्रीन का उत्पादन करेगा -

धारीदार टैब

धारीदार टैब हमारे टैब के चारों ओर एक कंटेनर जोड़कर बनाया जा सकता है tabs-stripedकक्षा। इस वर्ग के उपयोग की अनुमति देता हैtabs-background और यह tabs-color टैब मेनू में कुछ आयोनिक रंग जोड़ने के लिए उपसर्ग।

निम्नलिखित उदाहरण में, हम इसका उपयोग करेंगे tabs-background-positive (नीले) वर्ग हमारे मेनू की पृष्ठभूमि शैली के लिए, और tabs-color-light(सफेद) टैब आइकनों को स्टाइल करने के लिए क्लास। दूसरा टैब जो सक्रिय है और अन्य दो जो नहीं हैं के बीच अंतर पर ध्यान दें।

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

उपरोक्त कोड निम्नलिखित स्क्रीन का उत्पादन करेगा -