Ion scrollable tabs

Question

Hi, I was wondering before I did something of my own if the ionic has something like scrollable tabs . I looked and saw this in the fitrpg application, which was made with ionic, but I did not know if it was custom or not. I am going to use it for a list, for example in fitrpg, and will have several sections for sorting the list in different ways, for example, for the highest rated, latest, etc. I also saw the ionics slide box and thought that I could implement it with this if I made a fantasy title myself. But I decided that I would find out if someone made a package for this or has any tips that would be useful if I did it myself. There is also a fitgpg image of what I'm trying to achieve. I need tabs such as "All active" and "Completed", where you can navigate between them.

Answer 1

This library seems to do what you need:

https://github.com/saravmajestic/ionic/tree/master/tabbedSlideBox

Answer 2

It must have a function and request in the community. I am also waiting for scrollable tabs and seem to be looking at it! It may be available in a future upcoming release. See the Github issue and Trello .

Answer 3

I used html and css to make these tabs scrolllable. I would like to mention that the scrollable tab feature is not available. However, the solution, below which I understood, works wonders for me.

You can continue to customize the array of tabs with unlimited data.

NOTE: you won’t be able to scroll the browser during development, but as soon as you install the application, it will work on swipes ... also works in ionic form

HTML code for the section:

<ion-header-bar class="bar bar-header row" align-title="center"> <!-- here goes your header code --> </ion-header> <ion-nav-view> <ion-content> <!-- here ur templates will be injected --> </ion-content> </ion-nav-view> <ion-footer-bar> <div class="auFooter"> <div class="auFooterItem" ng-repeat="tab in tabs" id="tab{{tab.id}}" ng-class="{'IAmActive':tab.id===activeTabId}" ui-sref="{{tab.url}}" ng-click="change_tab({{tab.id}})"> <p> <img src="{{tab.imageurl}}"> </p> <p> {{tab.title}} </p> </div> </div> </ion-footer-bar> 

CSS FOR HARD NOTE I use SASS for my css structure:

 .pad0{ padding: 0 !important; } .padTop0{ padding-top: 0 !important; } .padBottom0{ padding-bottom: 0 !important; } .padLeft0{ padding-left: 0 !important; } .padRight0{ padding-right: 0 !important; } ion-footer-bar{ @extend .pad0; .auFooter{ height: inherit; background-color: #000F22; padding: 0; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow:row; position:absolute; left: 0; overflow-x: scroll; .IAmActive{ background-color: #E68C00 !important; } .auFooterItem{ padding: 10px; cursor: pointer; color:white; overflow: auto; font-size:22px; background-color: #000F22;//crimson; border:1px solid #000710; flex:1; -webkit-flex:1; text-align:center; min-width:200px; p{ margin-bottom: 0px; font-size: 16px; img{ height: 34px; } } } &::-webkit-scrollbar{ display: none; } } } .bar{ height: 60px; } .bar-footer{ height: 90px; } 

Javascript to change tab:

 $scope.activeTabId='tab1'; $scope.change_tab=function(tabid){ $('#tab1').removeClass("IAmActive"); if($scope.activeTabId!==tabid){ $scope.activeTabId=tabid; } } $scope.initTabs=function(){ $('#tab1').addClass("IAmActive"); } setTimeout($scope.initTabs,500); 

json tab sample

 $scope.tabs = [ { "id":1, "title" : 'Gallery', "iconoff":'ion-ios-photos', "iconon":'ion-ios-photos', "url":'home', "tabname":"tab-dash", "imageurl":"img/icons/gallery.png" }, { "id":2, "title" : 'Customer Enquiry Form', "iconoff":'ion-android-contact', "iconon":'ion-android-contact', "url":'cenquiry', "tabname":'tab-chats', "imageurl":"img/icons/customer_enquiry.png" }, { "id":3, "title" : 'Top 5', "iconoff":'ion-android-star-half', "iconon":'ion-android-star-half', "url":'top5', "tabname":'tab-top5', "imageurl":"img/icons/top-5.png" } ];