Post
Ask Question

Using Ionic Tabs Control Classes In Visual Studio 2015

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

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.

Cordova

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.

Cordova

Step 3

Main screen is shown below.

Cordova

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.

Cordova
  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
    1. <ion-content>  
    2.     <div class="tabs"> <a class="tab-item">   
    3. Home   
    4. </a> <a class="tab-item">   
    5. Setting   
    6. </a> <a class="tab-item">   
    7. Search   
    8. </a> </div>  
    9. </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];}  
    Cordova

  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
    1. <ion-header-bar class="bar-stable">  
    2.     <div class="tabs"> <a class="tab-item">   
    3. Home   
    4. </a> <a class="tab-item">   
    5. Setting   
    6. </a> <a class="tab-item">   
    7. Search   
    8. </a> </div>  
    9. </ion-header-bar>  
    Cordova

  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
    1. <ion-header-bar class="bar-stable">  
    2.     <div class="tabs tabs-icon-only">  
    3.         <a class="tab-item"> <i class="icon ion-home"></i> </a>  
    4.         <a class="tab-item"> <i class="icon ion-settings"></i> </a>  
    5.         <a class="tab-item"> <i class="icon ion-search"></i> </a>  
    6.     </div>  
    7. </ion-header-bar>  
    Cordova

  4. Adding Tonic Tab Icons to both header & Footer

    Now, we added the Ionic tab icons to both header & footer

    Coding
    1. <body ng-app="starter">  
    2.     <ion-pane>  
    3.         <ion-header-bar class="bar-stable">  
    4.             <div class="tabs tabs tabs-icon-only">  
    5.                 <a class="tab-item"> <i class="icon ion-home"></i> Home </a>  
    6.                 <a class="tab-item"> <i class="icon ion-settings"></i> Settings </a>  
    7.                 <a class="tab-item"> <i class="icon ion-search"></i> Search </a>  
    8.             </div>  
    9.         </ion-header-bar>  
    10.         <ion-content> div class="tabs tabs tabs-icon-only">  
    11.             <a class="tab-item"> <i class="icon ion-arrow-left-c"></i> </a>  
    12.             <a class="tab-item"> <i class="icon ion-star"></i> </a>  
    13.             <a class="tab-item"> <i class="icon ion-arrow-right-c"></i> </a>  
    14.             </div>  
    15.         </ion-content>  
    16.     </ion-pane>  
    17. </body>  
    Cordova

  5. Change the size of the Icons

    We can change the size of Ionic icons by ionic.css file.

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

  6. Adding the Bar Ionic Tabs

    We can add Ionic tabs in vertical way by bar-tabs.

    Coding
    1. <div class="bar-tabs">  
    2.     <a class="bar-tabs"> <i class="icon ion-arrow-left-a"> <font size="4">Backward Play</font> /i>   
    3. </a>   
    4. <br />   
    5. <a class="bar-tabs">   
    6. <i class="icon ion-arrow-right-b"><font size="4">Play</font> </i> </a> <br />  
    7.     <a class="bar-tabs"> <i class="icon ion-arrow-right-a"><font size="4">Forward Play</font></i> </a>  
    8. </div>  
    Cordova

  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
    1. <div class="tabs tabs-background-assertive tabs-color-light">  
    2.     <div class="tabs">  
    3.         <a class="tab-item"> <i class="icon ion-home"></i> Home </a>  
    4.         <a class="tab-item active"> <i class="icon ion-settings"></i> Settings </a>  
    5.         <a class="tab-item"> <i class="icon ion-search"></i> Search </a>  
    6.     </div>  
    7. </div>  
    Cordova

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

Cordova

Output

Main screen is shown below.

Cordova

Output 1

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

Cordova

Output 2

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

Cordova

Output 3

Apply Ionic tabs icons.

Cordova

Output 4

Apply Ionic tabs icons with the caption.

Cordova

Output 5

Changing size of Ionic tabs.

Cordova

Output 6

Apply background color to Ionic tabs icons

Cordova

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.


Similar Articles