Understanding Tabs In Ionic Framework

A very popular pattern on all mobile platforms is the tabbed interface. This interface is especially popular on iOS where it is encouraged by Apple’s design language over a side menu. It has the advantage that the user can see all of the options available to them whereas a side menu’s options are hidden by design.

Ionic has a very simple tabs directive allowing you to implement these kind of interfaces with lots of options for different styles (icons only, text only, text and icon). In this tutorial, we’ll take a look at the ionic-starter-tabs project on GitHub and break it down piece by piece to get a good understanding of how it works.

Tabs Directives

The ion-tabs directive is made up of a few parts. First, the main directive that wraps everything related to the tabbed interface.

On this main tag, we can control the look and style by assigning CSS classes. For example, to use the positive color scheme and have tabs with only icons, we can assign the tabs-positive class and the tabs-icon-only class.

A full list of tab-related classes can be found on the Ionic Docs.

Inside of the ion-tabs directive, we define each of our tabs and their content.

For each of these tabs we have defined their title, which will be used as the text (Assuming we have set up our tabs to show text). We also have the ability to specify an icon using the icon attribute passing in the name of an ionicons class or specify different icons for a tabs selected and not selected states (active and not active).

You may also specify a badge (a little number of the icon like when you have notifications in an app), a function to call when a tab is selected, a URL to go to when a tab is selected, or override what happens when a tab is clicked. For a full list of attributes, see the Official Documentation.

Tabs Index

Let’s begin digging into the tabs starter project. The project is made up of the main index.html page, a tabs.html template which serves as our template and contains our tabs code, as well as templates for each view. Additionally, we have an app.js for our app’s configuration and controllers.js for our controller code.

The idea here is our index.html defines our app and creates kind of a shell. The tabs.html defines the structure of our app and inside of this structure is where the views live. Let’s take a look at our index.html page:

You’ll notice how little there actually is here. As stated above, the idea here is that we have a shell for our app by marking the body with the ng-app attribute. In the case of this starter project, we have opted to place the ion-nav-bar in our index.html, but we could easy have placed it in our tabs.html page.

tabs.html

Let’s take a look at the tabs.html file. Remember, this file is our main template and will define both the tabs and where the content will fit in.

You’ll see we’ve defined our ion-tabs and ion-tab pattern.

ion-tab

Each ion-tab above has a ion-nav-view element inside of it. The ion-nav-view is where our child states (the views of our app) will be inserted and live. Each one of our tabs will have it’s own children and it’s own navigation history. Note that we have given each ion-nav-view a name attribute. This name will be used to reference to the ion-nav-view when we are building our states in the app’s config.

You’ll also notice each ion-tab has a href attribute pointing to a URL. This is the URL your app will navigate to when that tab is pressed.

Child View

Now that we have our app’s structure and main template, let’s take a look at what the child views (the actual content views of the app) look like.

This is tab-dash.html, the default view in our app. Everything in these template files should be wrapped in the ion-view tag, and the actual content for the view in a ion-content tag.

Controllers

For this app, we have a controller for each child view that needs a controller. These are pretty straight forward as far as Ionic/Angular controllers go, so we won’t go much into that.

Configuration

Here’s where the magic happens. Using the Angular-UI router, we want to define our tabs.html as an abstract state. From the Angular-UI docs an abstract state “…can have child states but can not get activated itself. An ‘abstract’ state is simply a state that can’t be transitioned to. It is activated implicitly when one of its descendants are activated.”. This is exactly what we want. We want our user to navigate to the actual views, but to inherit the main layout from the parent abstract state.

Our base URL, as configured here, is /tab. Notice our child state uses dot notation where to the left of the dot is the name of the parent state and to the right of the dot is the name of the child state. In our url, we don’t need to tell the router to go to “/app/playlists”, as it already knows to do this.

Remember the name attributes on the ion-nav-view elements in the tabs.html page?

Here is the router, on each child state, we are defining that it should put it’s content (using the template file and the controller specified) in that ion-nav-view.

Conclusion

While there are a couple of concepts to wrap your head around when working with the tabs pattern, it becomes much easier to understand when you break it down piece by piece into bit sized pieces. Need further clarification or have a request for another Ionic post? Feel free to comment below or follow and mention me on twitter (@andrewmcgivery). You can also catch more blog posts by me on my blog.

Andrew McGivery

Andrew McGivery works as a full time as a Web/Portal Developer in the System Integration and Innovation department at Conestoga College in Canada where the focus is on Research and Development for new projects, concepts, and technologies. Andrew runs a blog (http://mcgivery.com/) that covers many topics including the Ionic Framework.

  • paulogr

    Hi Andrew, great article, I´m working on a project with tabs right now !

    Let me ask you something.

    If I want to navigate to outside a tab, like to a new view. Is it possible ?

    In one of my tab views is a list of itens, but when clicked I want my detail view show up outside the tab.

    I already tried to add another but didn´t work as expected.

    Thanks

    • Andrew McGivery

      Hi paulogr,

      So if you notice with the code above on the index.html, there is a . Our parent abstract state uses that nav view for it’s rendering. If you want a view that is outside of the tabs, you just have to use that nav view.

      Try using another state that isn’t a child state of the abstract one.

      .state(‘other’, {
      url: “/other”,
      templateUrl: “templates/other.html”
      controller: ‘OtherCtrl’
      })

      And then just link to this state from whereever you want in your app:

      Go Somewhere Else

      Let me know if this helps.

      • Thomas Withaar

        Hi Andrew, just wanted to let you know that this old thread saved me! I had the exact issue paulogr had, and I didn’t quite understand the chidl states as explaiend by the ui-router docs. The Ionic tab starter project explained it well, as did your article. And this question made it possible to have a seperate detail view!

  • David Chen

    Thanks for the great article. I’m playing around with the ionic and this tutorial is really great. I do have a question on tab, similar to a question here: http://forum.ionicframework.com/t/how-to-use-has-tabs-and-tabs-item-hide/12600
    ————
    I use ionic to build an app. It has a tabs bar.
    In the tabs, we have notifications, it is a list, then, each item in notifications can be viewed in notification-detail state.
    So, at notifications state, I want to show the tabs bar, in the notification-detail state, I want to hide the tabs bar.
    ————-

    • Andrew McGivery

      You could set up your details view to not be under your parent abstract state. Using the example from above but slightly modified:

      • David Chen

        Thanks Andrew!

        Just tried this, but the “Back” button in the NavBar (of friend-detail) disappear and I can’t get it back even set hide-back-bar to false (per this doc: http://ionicframework.com/docs/api/directive/ionView/)

        • remondo

          This is exactly the problem I have and I’m fairly certain it’s a bug. The back button will show again once you navigate to another tab and back again. I posted in the forums asking how to stop this happening but nobody seems to know how to solve it.

  • Amanda Peterson

    Hi! Question for anyone out there…

    I can’t seem to get a view to show unless it is also a tab. I believe this has to do bc of the nested tabs in the app.js file. Can someone help?

    More specifically. I have a tab called settings. In settings, I have a list, including profile, contacts, issues, and trends. I cannot get to any of these four on the list unless I put it into the tab.

    Hope my questions is clear, but feel free to ask clarifying questions!

    Thanks in advance for any help/insights!

  • Lai Tang

    Hi, how do I run controller specific functionality when a tab is selected? e.g. checking a users credentials.

    • Siddharth Pandey

      onselect property u can use…and call a function

  • Yanupla

    I have a question: What if i want to have all the Tabs from above, but also another set of 3 tabs that i can reach from SideMenu

  • Hugh Barnard

    Thanks for this, just starting with Ionic. I want a multilingual top ‘abstract’ set of tabs. This is what I’ve tried:

    I’ve tried ng-model as well, incidentally.

    and a [working, I have debug alerts in it!] Languages factory:
    var en = {
    ‘MARKETPLACE’ : ‘Marketplace’,
    };
    var fr = {
    ‘MARKETPLACE’ : ‘Marche’,
    };

    var stuff = JSON.stringify(trans) ;
    alert(‘in translate ‘ + stuff + ‘ ‘ + lang) ;
    return trans ;

    The Languages do load, from permanent storage before the main display. So ‘something like this’ should work? Thanks in advance Hugh

    • Have you tried without the curly braces?

      title=”trans.MARKETPLACE”

      • Hugh Barnard

        Yes, just gives me that as a literal….

      • Hugh Barnard

        Hi Andrew, I’ve just changed philosophy and am now using angular-translate. That’s resulted in quite a bit of recoding, but, happily, I only just started the app. It works well and is pretty well documented. So that would be my pick to solve this kind of problem from now on.

  • Jonathan Corredor

    Really usefull. Thanks

  • Abubaker Shangab

    Very useful thanks, I have a question if I need a controller for the ion-tabs component itself. So that I can change the title as the current situation. Is there a way ?

    • Should be able to just add a controller to the abstract state.

  • Stark

    Hi there, thank for your post.
    I’m new in Ionic. I’m making an app which has tabs in header.
    This is my code:

    And I get the tabs in top, but the header is getting while space ??

  • Wow. Thanks. Im quite new to ionic… And messed up with Child Views inside Each Tabs… This $stateProvider thing makes me clear.. Thanks for the Clear Tutorial 🙂

  • Wilson Alvarez

    Hi , Good post ,
    A question, I can get the same performance , if I use the layout tabs for classes , where should put tag?

    Example:

    ?????

  • Hendi

    Hi, the article really helped me understanding the tabs navigation 🙂
    But I have a problem: I use Intel XDK and as result I only get white screen with “Back” on it. In controllers.js it says .config unexpected ‘.’ . In app.js it says angular is not defined. I loaded all necessary files I think. Do you have an idea, what is causing the errors ?

  • Shivam Sharma

    Hi,

    My questions is ,

    Suppose I have a page which have following contents:
    1] list of items & at bottom tab (three tab)
    2] Tab 1 for same page
    3] Tab 2 for another list of items
    4] Tab3 for simple static paragraph

    Now main thing
    1] Suppose I clicked on tab1 which has list of items and I clicked on any single item
    2] Then details related to the item will be show + back button at top + replace all tab with new three tabs 3] All new three tab will have common back button at top
    4] All new tab is regarding the item details such as personnel details tab , attendance tab and contact tab

    So , please let me know solution of this.

    Regards
    Shivam

  • R.O.

    Thanks for the great explanation.
    I have a page with ion-view, inside is ion-content. Then i
    am trying to place slide-box with two slides inside ion-content. Then
    placing 3 tabs side-by-side to make a single bar underneath the
    slide-box.
    But, whenever i place the tabs the slides inside the slide-box are out of view.
    Please, kindly help.

  • angelarted

    Thank you very much! This is really well explained!

  • Josh Garwood

    Hi there!

    Thanks so much for yet another amazing post! From this, I have one remaining question, considering my scenario below:

    I have an abstract tabs state
    In the tabs, I have Feed, Search, Notifications, and My Profile (very similar to Instagram)
    From the Feed you can navigate to a Users Profile screen, which you can also do from the Notifications screen, and the Search Screen.
    *** The User Profile screen should be nested in whatever parent screen it was invoked from
    *** This is where I’m stuck… I’m not sure how to structure my states or my links to achieve this without duplicating the UserProfile view (ie: user-profile-from-feed, user-profile-from-notifications….
    Any help would be extremely appreciated!
    Thanks, and I hope all is well 🙂

    • Well, you have two options. If you want to stick with abstract states, you can create 4 states (one for each tab) that all point at the same template and controller so you only have to duplicate state configuration and not your template or controller.

      Another option is to ditch abstract states, using only one ion-nav-view and just use the tabs as normal links VS the full shabang tabs control.

  • 文壮 刘

    Hi,
    Great post, but I have a question:
    Now my application has four tabs with dark background, and when I navigate between tabs, the white screen will comes out, very ugly! Can you help me? Looking forward to hearing from you.

    • Noah

      We recently had to work through this issue as well in our app. I don’t have a great solution to share, but we ended up adding background images to those briefly visible containers, such as .pane . It’s a bit of an ordeal, but I don’t think there’s an elegant solution right now. Hopefully you’re long past this now! Here’s an example of what we did with a :before pseudo-element:

      ion-view.pane:first-child:before {
      content: ” “;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100px !important;
      background: url(‘../img/tabBackground.png’), url(‘../img/banner.png’) !important;
      background-position: center, top center !important;
      background-repeat: no-repeat !important;
      padding-top: 10px, 0px !important;
      z-index: 1;
      }

      • 文壮 刘

        Thank you for replying. This issue has troubled me long time, I’ll try your solution as soon as possible.

  • sufiyan khan

    hi Nic,

    i am using ion side menu and i want a certain ion item to be active here is my code

    how would i do that

    • I’m not sure what you mean by active, but you could probably use ng-if or ng-show.

      • sufiyan khan

        I have a page as skip( the above code i mentioned)I.n which i have to side menus 1) news and 2)startup.when i open a this skip page i have a blank page and after clicking on the news on the side menu i get redirected to news page all I want is when i load the skip page it should not b blank. and it should display the news page by default.

  • Anurag Pandey

    hi Nic ,
    how-to-remove-default-title-of-the-ion-tabs if any idea ?

    • I don’t know what you’re asking. Can you try again?

      • Anurag Pandey

        sorry but i solved the problem , when using the ionic tabs show default title on top. just remove its.

  • Azmeer Mohamed

    Love see some screen shots

  • Mateus Medice

    I noticed that when I use Ionic Tabs, when I select a tab at the first time, the view call the controller. But, if I change the view, by clicking in another tab, and back to first tab, the view doesn’t call the controller, I think the view is keeping the state. But I need to reload data every time that i select a tab. Is there a way to solve it?

    • Jared M. Smith

      When configuring the state set cache to false.

      Example:

      • Mateus Medice

        Solved my problem! Thank you!

  • Jose Antonio Mateos

    Hi Andrew,

    I have implemented ion-tabs as you indicate but no success. I have followed all steps and almost identical.

    I can not guess where is the fault.

    Here I Attach you some snapshots of my code for you to check my implementation.

  • chirag kadam

    Am create one html page and in that one tab as friend and pass registration.html as link, but when click on tab it not proccess…
    wht i do?

  • chirag kadam

    where friendsCtrl is define….???????

  • Liga Do Desconto

    Hi! It’s possible to create dynamic tabs? (each with your title and url, of course)

    I want to read a JSON from a web server then build the tab navigation.
    Can you help me?
    I search for a while on web but I can’t found nothing.

    Best Regards
    Guilherme Zima

  • taral lokhande

    how to add tabs in cards..like I have list of cards and when I click on one of these cards I show a sub card like implemented in call list in default android dialer. now I want tabs in those sub cards …can you guide me how to do it.?