Chapter 8. Building a Simple Social App

In this chapter, we are going to focus on learning how to create an Ionic application that has tabs using the Ionic tabs template. We will also have a look at some of the things that make up the tabs template and learn how to add features into it.

The Ionic tabs application

Tabs are a very common menu system in mobile apps. They provide users with a simple yet effective way to create independent views in an app that sort of act like apps within an app.

The preceding screenshot is a view of a sample Ionic tabs application. One great feature that a tabbed menu system provides is the ability to maintain the independent context within each individual tab menu. No matter where you are in the application, you always have the option of switching to another tab at any point. Navigation history is another feature that the tabs menu provides. You are able to navigate to different views within each tab, and you do not lose this navigation history when you switch back and forth between any tab menu. Now that we have some clarity about what the tabs application entails, let's go ahead and create a brand new tab application and look in detail at how it operates.

Creating an Ionic tabs application

Creating an Ionic tabs application is not too different...

The <ion-tab> element

Within the <ion-tabs> element, you will see three distinct <ion-tab> elements. The <ion-tab> element is the element used to create a tab and must be a child element of the <ion-tabs> element. You will see that each <ion-tab> element has some attributes. The title attribute is used to specify the title that that particular tab will display. The icon-on and icon-off are attributes that are used to define what icons get displayed when the tab is in focus and out of focus. Lastly, the href attribute is used to provide the path of the route that should be navigated to when that particular tab is selected.

Note

There are a lot more attributes that are available for different customizations and actions for <ion-tab>, and these are all available and duly documented on the official Ionic documentation page.

Within each <ion-tab> element, you will find an <ion-nav-view> declaration. The <ion-nav-view> is an element used...

Summary

In this chapter, we learned about the Ionic tabs application template. We also created a tabs application called tabs-app and even got as far as adding a new tab of our own. In the next chapter, we will be using this same application to learn how to use Firebase to add backend services to our application.