Great question. There are two different approaches:
- As was done in the second example, using a tab and gesture detector. Onsen 2.0 has a
slide animation for tabs, so you just need to add <ons-tabbar animation="slide" ... > . Onsen 2.0 is still in alpha, but it will be released in the coming weeks. The disadvantage of this approach is that the animation of the slides begins after the completion of the swipe.
Basically you add your ons-tabbar element and then set up your gesture detector like this:
ons.ready(function() { // Create a GestureDetector instance over your tabbar // The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...) var gd = ons.GestureDetector(myTabbar._element[0]); gd.on('swipe', function(event) { var index = myTabbar.getActiveTabIndex(); if (event.gesture.direction === 'left') { if (index < 3) { myTabbar.setActiveTab(++index); } } else if (event.gesture.direction === 'right') { if (index > 0) { myTabbar.setActiveTab(--index); } } }) });
Work here: https://jsfiddle.net/frankdiox/o25novtu/1/
- Combining
ons-tabbar and ons-carousel . The disadvantage of this approach is that ons-carousel-item cannot get a template or a separate file (check the comments to find another workaround for this).
ons-tab requires the page attribute, and you cannot leave it empty without errors in the console, but we can use the ons-tabbar instead of the actual component: http://onsen.io/reference/css.html#tab-bar
Now we will combine it with a full-screen carousel similar to the one you mentioned, and add the following CSS so that the content of the page matches our tab so that it does not fall and is not behind:
ons-carousel[fullscreen] { bottom: 44px; }
Next step, we associate each tab with the corresponding carousel element:
<div class="tab-bar" id="myTabbar"> <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)"> ... </label> <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)"> ... </label> <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)"> ... </div>
And so on. This will allow us to do this, when we click on the tab, the carousel automatically changes. Now we need to make the opposite connection: refresh the marked tab when we carry out the carousel. The tab basically has a set of radio buttons, so we just need to get the one we want in the postchange carousel and check it:
ons.ready(function(){ carousel.on('postchange', function(event){ document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true; }); });
Now you can change the contents of each carousel-item-index and insert the ons-page with whatever you want.
Work here: http://codepen.io/frankdiox/pen/EVpNVg
We can add a feature to make this easier in future versions of OnsenUI.
Hope this helps!