Switching between Bordered Top Tab Bar

[cflocation]

Hi,

So I am just starting with this framework and need some help on how to get the custom Bordered Top Tab Component to trigger tab changes. When I use the sample tabs everything works as expected but on their http://components.onsen.io/ page I see the tabs a want to use and they are setup using DIVS not </ons-tabbar>

Can I get a little direction since I have not been able to find any documentation on how to make them work.

Thanks

<div class=“tab-bar tab-bar–top tab-bar–top-border”>
<label class=“tab-bar__item tab-bar–top-border__item”>
<input type=“radio” name=“top-tab-bar-b” checked=“checked”>
<button class=“tab-bar__button tab-bar–top-border__button”>
Home
</button>
</label>

<label class=“tab-bar__item tab-bar–top-border__item”>
<input type=“radio” name=“top-tab-bar-b”>
<button class=“tab-bar__button tab-bar–top-border__button”>
Comments
</button>
</label>

<label class=“tab-bar__item tab-bar–top-border__item”>
<input type=“radio” name=“top-tab-bar-b”>
<button class=“tab-bar__button tab-bar–top-border__button”>
Activity
</button>
</label>
</div>

[munsterlander]

@cflocation Sorry for not understanding your question right off. Are you wanting to know how to add an event to the buttons or are you wanting to know how to get which button is checked? There are two different types of tabs mentioned in the docs. One is found in the CSS reference here:

https://onsen.io/2/reference/css.html

And the other is an ons component here:

https://onsen.io/2/reference/ons-tabbar.html

They do the same thing but have different things built in. Are you wanting to use it for navigation? If so, then use the ons-tabbar (second link). With your response, hopefully we can get you pointed in the right direction. Also, do I detect a fellow ColdFusion guy via your username?? :grinning:

[cflocation]

Hi

Thanks for the reply.

So how do I get the <ons-tabbar> to look like the Bordered Top Tab Component. I tried to update the CSS and the tabs always look the same. I am trying to get the <ons-tabbar> to work like the ordered Top Tab Component example on the http://components.onsen.io page.

I am sure I am missing something very simple but cannot seem to make them work like I want them to.

Thanks

[munsterlander]

Are you using Onsen 1.x or 2.x - beta?

[cflocation]

1.x.

[cflocation]

Ok it is working in 2.0.

Thanks for pointing me to what version.

[munsterlander]

@cflocation Please see the below code to replicate what you seek using the ons component:

The CSS used:

<style>
    :checked + .tab-bar__button {
      border-bottom: 4px solid #7abfff !important;
    }   
</style>

Here is the ons component - I am using Onsen 2.x - should work with 1.x though.

 <ons-tabbar position="top">
  <ons-tab page="page1.html" label="Home" active="true"></ons-tab>
  <ons-tab page="page2.html" label="Comments"></ons-tab>
  <ons-tab page="page3.html" label="Activity"></ons-tab>
</ons-tabbar>

Edit: Haha, I just saw you switched to 2.0 to get this working. I took the 1.x challenge to make it work though. Anyway, hope this helps someone out there!

[Fran Diox]

In Onsen 2 you just need to add modifier="top-border" to the ons-tab :)

[munsterlander]

@Fran-Diox Sweet! I just tested that and it works smashingly! No need to add any external overriding CSS. So for undocumented features, is the modifier basically a CSS override where if we find the class we can specify it or is it only for specific styles?

[Fran Diox]

@munsterlander Internally, modifier adds CSS classes according to a scheme. For example, ons-dialog has few items inside with dialog, dialog-container, dialog-content and other classes. modifier="material" will add dialog--material, dialog-container--material, etc. to the corresponding elements. It works with any value of modifier but of course we only apply styles to some specific classes.