How to create dynamic tabs

I want to create dynamic tabs using ionic like this in plunker :

Please also tell me that can I create tabs in header/in top of page as ion-tabs are created in footer/ page bottom.

See this post : How to create sub tabs inside a tab view?

NOTE : That new tab can’t use a “state”. Right now and possibly forever, Ionic can’t use dynamic state names for tabs.

You can create “tabs on top” like this :

<ion-tabs class="tabs-icon-only tabs-top">

UPDATE : The Ionic dev team is NOT implementing this dynamic view name idea. It conflicts with the generic naming of views. So, you cannot use this implementation if you are sticking with stock Ionic code.

1 Like

thanks @Calendee . One thing more i want to customize the color of ion-tabs like I want

ion-tabs class=“tabs-icon-only tabs-top” style=“background-color: purple;”

It works for header and footer but not for tabs. please guide me how to change the color of tabs other the the color ionic provides .

See the docs here about styling Ionic tabs.

Tabs can be styled to match the standard Ionic colors (the example is using the default color. Use these classes to change the color of the tab bar: tabs-default tabs-light tabs-stable tabs-positive tabs-calm tabs-balanced tabs-energized tabs-assertive tabs-royal tabs-dark

1 Like