WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Tabs


Ionic tabs are most of the time used for mobile navigation. Styling is optimized for different platforms e will understand in detail, how to create tabs in this chapter.

Simple Tabs

Simple Tabs menu can be created with a tabs class. For the inside element that is using this class, we need to add tab-item elements. Since tabs are usually used for navigation, we will use tags for tab items.
<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>

Adding Icons

If you want your tabs to have icons without any text, a tabs-icon-only class should be added after the tabs class. Of course, you need to add icons you want to display.
<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>
The tabs-icon-top and tabs-icon-left are classes that will place the icon above or on the left side respectively.
<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>

Striped Tabs

Striped Tabs can be created by adding a container around our tabs with the tabs-striped class. This class allows the usage of the tabs-background and the tabs-color prefixes for adding some of the Ionic colors to the tabs menu.

This class allows the usage of the tabs-background and the tabs-color prefixes for adding some of the Ionic colors to the tabs menu. we will use the tabs-background-positive (blue) class to style the background of our menu, and the tabs-color-light (white) class to style the tab icons.
<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>

Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com