How to style each tab separately in ionic@1.0.3-beta

ionic-v1
1

Just using the “tabs” example applications ans added a class to 

<ion-tabs class="tabs-icon-top tabs-calm">
<ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash" class="my-style-tab1">
	<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

<ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends" class="my-style-tab1">
	<ion-nav-view name="tab-friends"></ion-nav-view>
</ion-tab>

<ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account" class="my-style-tab1">
	<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>

Unfortunately the class is ignored in the rendered view.
How can I add a separate style to each tab ?

Kind regards
pp

2

If anyone is interested in the solution:
I found a way to style them by using nth-last-child(n)

pp

1 Like
3

Hey, do you mind posting a codepen with this example? It could be a good resource for anyone who wants to do this too

4

As requested here is the codepen:

1 Like
5

UPDATE:
If it’s weird for you to count backwards or if you have a dynamic count of tabs (like I do) you can use nth-of-type to start counting from the beginning an d style your tabs:

a.tab-item:nth-of-type(1) { // do your styling for the first tab here } a.tab-item:nth-of-type(2) { // do your styling for your second tab here }

1 Like
6

I made a PR for your problem, I added the class attribute to the ion-tab directive. https://github.com/driftyco/ionic/pull/1382

1 Like