Using Ionic Tabs Control Classes In Visual Studio 2015

Article

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

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];}
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>
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>
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>
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; }
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>
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>

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