ons-tabbar and segments



  • Is there a way to combine ons-tabbar and segments? I would like for the tabbar to look exactly like the segments. I was looking at the Onsenui CSS documentation here, but I am still confused as to how to go about this. I could not find any examples of the segment component in use.


  • Onsen UI

    @rgins16 The segment is just CSS for now, although we will probably make a custom element with it soon. If you want to show a segment instead of a tabbar, here are a few ideas:

    • Make a modifier for ons-tabbar to make it look like a segment.
    • Hide ons-tabbar (tabbar.hide()), show the segment and then use tabbar.setActiveTabIndex(...) correspondingly on each segment button.
    • Create a custom “tab bar” where you simply have multiple pages at the same level but only show one of them (display:block). Toggle the display property according to the segment.


  • @Fran-Diox ahhh. I thought you guys already created the custom element and that I was missing something. Thanks for the tips! #2 looks promising.


Log in to reply