onsen ui 2 : how to implement android style scrollable tabbar?

Question

I'm making an android app using onsen-ui 2 for front-end. I'll be displaying multiple categories via tabs on one page.Since there are around 7 categories, I want to implement scrollable tab-bar like in native android apps. So, basically how to do something like scrollable tab-bar using onsen-ui 2. For now I think its not built-in. I want to implement something like this:

https://i.stack.imgur.com/zjILk.png

I did try using materialize css but it doesn't work perfectly.It increases the width of the page and breaks the responsive view.

Update: I set these CSS properties to get extended view:

`    .tab-bar{
      display: block;
      table-layout: none;
      width:200%; //this is the problem now...
      }`

along with this I added custom jquery.kinetic library to get touch scrolling from here: http://davetayls.me/jquery.kinetic/ and initialized to ons-tabbar like this: <ons-tabbar modifier="material" id="tab"> //in HTML

$(document).ready(function(){
$("#tab").kinetic();
});

Scrollable tabbar works fine. but if the width of tab-bar class is too big,there are white spaces at the end. Is there any way to overcome this? One answer I thought was CSS media queries but tabs are being added dynamically.So, they might go above 7 in the future.Any help will be appreciated.

score 2 · Accepted Answer · answered Apr 25 '16 at 11:10

Well technically it depends on how much you care about the bonus arrows and similar things. External libraries may help if you really want such extras. If what you want however is just the ability to have a scrollable tabbar you can achieve that without much hassle in a couple lines of css:

.tab-bar {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}

.tab-bar__item {
  display: inline-block;
}

Demo

In the demo I also added width: 20% to the item. If you don't like that you can just add some padding or something similar to make the items look good. Generally something like padding: 0 10px should be more than enough.

If you want the > arrows I guess some javascript will be required. Since the question is tagged css3 though I'm guessing you would like to avoid writing javascript for this.

Also a note about kinetic : it looks nice, but you should also try to see how it feels without it since most phones nowadays seem to already have nice motion scrolling (at least imo). Still it's your decision though.

onsen ui 2 : how to implement android style scrollable tabbar?

1 Answers1