Using Ionic Tabs Control Classes In Visual Studio 2015

Before reading this article, please go through the article links given below.

• QuickStart On Apache Cordova Using Visual Studio 2015
• UsingIonic Blank App Using Visual Studio 2015
• UsingIonic Side Menu App Using Visual Studio 2015
• UsingIonic Tabs App Using Visual Studio 2015
• WorkingWith Color Classes In Ionic Blank App Using Visual Studio 2015
• WorkingWith Button Class In Ionic Blank App Using Visual Studio 2015
• Working With Ionic Toggle Classes In Ionic Blank App Using Visual Studio 2015
• Working With Ionic List Item Class In Ionic Blank App using Visual Studio 2015
• Using Range Classes In Ionic Blank App Using Visual Studio 2015
• Working With Ionic Check Box Class In Ionic Blank App Using Visual Studio 2015

Apache Cordova

Apache Cordova is an open source project, which aims at allowing the mobile developers to build the Applications for all the major mobile platforms, using HTML, CSS and JavaScript technologies.

Ionic Framework

Ionic is a powerful HTML5 SDK, which helps you to build native-feeling mobile apps, using Web technologies like HTML, CSS and JavaScript.

Building Ionic Blank app with different Ionic tabs classes in Visual Studio 2015

Let's see how Ionic framework makes the use of Ionic tabs classes.

Ionic tabs are easy to navigate between different pages or functional aspects of an app. The tabs component are written inside the header tag or a body tag. Tabs are placed either at the top or bottom of your Application and allow the users to switch through different views.

In the Ionic tabs classes, we have the contents, mentioned below.

 

Tabs Properties	Meaning
Tabs-background-	Applying Background color
tabs-color-	Applying Text color
tab-item	Adding Tab item
tab-item active	Mention the Active tab among others
Aligning the tabs- left	right, center, top, bottom
tabs-icon-only	Display icons only
Tabs-color-active-	Apply different colors to the active tab

Ionic framework offers different types to make their usage easy. Let’s see how to use the Ionic tabs classes with Ionic Blank apps.

Prerequisites

• Visual Studio 2015.
• Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below to use the Ionic tabs classes in Ionic Blank apps, using Ionic framework.

Step 1 Create an Ionic Blank App

Let’s get ready to create a new project. Open Visual Studio 2015 and click File -> New -> Project option to create Ionic Blank apps, using Ionic framework.



Step 2 Giving the Project Name

Subsequently, a New Project Window will open, where you can select an Installed -> Template -> Java Script -> Apache Cordova apps ->Ionic JavaScript Blank.

Type Project Name Ionic-TabApp and click OK button.



Step 3

Main screen is shown below.



Step 4

Adding Ionic Tabs

Go to the solution bar and choose index.html. This is the starting screen of your app. We can add our HTML coding here.

1. Creating the Ionic Tabs on the Footer
   
   In HTML, we use tabs classes to add Ionic tabs.
   
   Explanation
   
   Now, we add Ionic tabs to the footer for ion-content tag.
   
   Coding
   

   <ion-content>
       <div class="tabs"> <a class="tab-item">
   Home
   </a> <a class="tab-item">
   Setting
   </a> <a class="tab-item">
   Search
   </a> </div>
   </ion-content> // This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

   
   
   
2. Creating the Ionic Tabs on Header
   
   In HTML, we use tabs classes to add Ionic tabs to the header.
   
   Explanation
   
   Now, we add the Ionic tabs to the header tags.
   
   Coding
   

   <ion-header-bar class="bar-stable">
       <div class="tabs"> <a class="tab-item">
   Home
   </a> <a class="tab-item">
   Setting
   </a> <a class="tab-item">
   Search
   </a> </div>
   </ion-header-bar>

   
   
   
3. Adding Ionic Tabs Icons
   
   Now, add the icons to the Ionic tabs classes. There are many pre-defined icons available in Ionic framework.
   
   Explanation
   
   We use tabs-icon-only to display the icons only.
   
   Coding
   

   <ion-header-bar class="bar-stable">
       <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-settings"></i> </a>
           <a class="tab-item"> <i class="icon ion-search"></i> </a>
       </div>
   </ion-header-bar>

   
   
   
4. Adding Tonic Tab Icons to both header & Footer
   
   Now, we added the Ionic tab icons to both header & footer
   
   Coding
   

   <body ng-app="starter">
       <ion-pane>
           <ion-header-bar class="bar-stable">
               <div class="tabs tabs tabs-icon-only">
                   <a class="tab-item"> <i class="icon ion-home"></i> Home </a>
                   <a class="tab-item"> <i class="icon ion-settings"></i> Settings </a>
                   <a class="tab-item"> <i class="icon ion-search"></i> Search </a>
               </div>
           </ion-header-bar>
           <ion-content> div class="tabs tabs tabs-icon-only">
               <a class="tab-item"> <i class="icon ion-arrow-left-c"></i> </a>
               <a class="tab-item"> <i class="icon ion-star"></i> </a>
               <a class="tab-item"> <i class="icon ion-arrow-right-c"></i> </a>
               </div>
           </ion-content>
       </ion-pane>
   </body>

   
   
   
5. Change the size of the Icons
   
   We can change the size of Ionic icons by ionic.css file.
   
   Coding
   

   .icon { display: block; margin: 0 auto; height: 32px; font-size: 40px; }

   
   
   
6. Adding the Bar Ionic Tabs
   
   We can add Ionic tabs in vertical way by bar-tabs.
   
   Coding
   

   <div class="bar-tabs">
       <a class="bar-tabs"> <i class="icon ion-arrow-left-a"> <font size="4">Backward Play</font> /i>
   </a>
   <br />
   <a class="bar-tabs">
   <i class="icon ion-arrow-right-b"><font size="4">Play</font> </i> </a> <br />
       <a class="bar-tabs"> <i class="icon ion-arrow-right-a"><font size="4">Forward Play</font></i> </a>
   </div>

   
   
   
7. Adding Background color, color-light and Active tag
   
   Now, we add the background color, changing the text color and activate any tag by default.
   
   Coding
   

   <div class="tabs tabs-background-assertive tabs-color-light">
       <div class="tabs">
           <a class="tab-item"> <i class="icon ion-home"></i> Home </a>
           <a class="tab-item active"> <i class="icon ion-settings"></i> Settings </a>
           <a class="tab-item"> <i class="icon ion-search"></i> Search </a>
       </div>
   </div>

   
   

Step 5

Run the Application

Now, we are ready to run our Project. Click Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).



Output

Main screen is shown below.



Output 1

After Adding Ionic tabs control to the footer, the output looks, as shown below.



Output 2

After adding Ionic tabs control to the header, the output looks, as shown below.



Output 3

Apply Ionic tabs icons.



Output 4

Apply Ionic tabs icons with the caption.



Output 5

Changing size of Ionic tabs.



Output 6

Apply background color to Ionic tabs icons



Conclusion

I hope you understood how to use Ionic tabs classes in the Ionic blank app, using Visual Studio 2015 and how to run it.