Forum | Appery.io

Hi! It supposed to be very simple. I just included the style on my CSS (also tryed crating a new one) but tab does ́t worked at index tabs, but work in pages. Any clue?

App link: http://app.appery.io/shared.html?doma...

username: abc
password: abc

you will see the header tab with icons. You can click on last tab icon you will se an other tab that get the style successfully.

Thank you in advance!

Hello Ricardo,

Please clarify, did you add these tabs on the index page, or on each page (MeusCartoesPage, ListaLojasPage,Extrato) separately?

For the variant #1 - app adds active class automatically,
For the variant #2 - please add manually that class for the current tab on each page

Hello!

I have inserted the class on my CSS1 file. Tabs under pages (that one at Extrato page - last right icon on header tab ), get the style ok.

The header tab that contain the icons is set on the index page - it don ́t get the style, I think the tab on header has a different component name (page tabs are called tabs and the header seems named as TopTab). I tried a class for .toptabs but didn ́t worked.

Tabs on the index page are default Ionic's tab: http://ionicframework.com/docs/compon...
So they don't have "active" class.

Tabs on other pages are similar to Ionic default, but they have this class: https://devcenter.appery.io/documenta...

You can use another workaround:
1) add scope variable activeTab with type="string";
2) add ng-click attributes for each tab:
for the first tab: activeTab="first"
for the second tab: activeTab="second"
and so on;
3) add attributes ng-class for each tab:
for the first tab: {active:activeTab==="first"}
for the second tab: {active:activeTab==="second"}
and so on;

Thank you Sergiy. It worked fine. I just created the variable at Model (header.activeTab), in that way I could set the value at init function of my main page to focus the tab icon at the 1st time after opening the app.

Question: can I use two attributes at ng-click? for example sentences: header.activeTab="first" goTo('Extrato')

For now I changed from goTo function to the navigate-to attribute name.

Just attention to use the atributes at tab level, not at icon level - to a better touch experience.

Sure, it is possible to use more than one property of the ng-click attribute, just add ";" between them. Also, you can sen only one function for that.