Ionic scrollable tabs

Question

Hello I was wondering before I made something my self if ionic has something like scrollable tabs. I was looking and seen it in the fitrpg app which was made with ionic but I didn't know if it was custom or not. I'm going to use it for a list like in fitrpg and would have several sections to sort the list differently like top rated, newest, etc. I also saw ionics slide box and thought I could implement it with that if I made a fancy header my self. But I figured I'd find out if someone made a package for this or has any advice that would be useful if I have to do it myself. Also here is a picture from fitrpg of what im trying to achieve. I need tabs like All Active and Completed where you can swipe between them.

enter image description here

score 4 · Accepted Answer · answered Oct 18 '14 at 07:30

4

This library seems to do what you need:

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

answered Oct 18 '14 at 07:30

fer

1,016
1
10
20

I took a look of that plugin but has a major bug that doesn't display, at the moment, dynamic data. See this issue https://github.com/saravmajestic/ionic/issues/26 – Guille Acosta Dec 28 '15 at 19:26

score 2 · Answer 2 · answered Jul 05 '15 at 16:21

2

It is must have feature and al-ready requested in community. I am also waiting for scrollable tabs and seems its under consideration !. May be it will be available in future upcoming release. See Github issue and Trello.

answered Jul 05 '15 at 16:21

Aman Gupta

5,548
10
52
88

Tilakraj Gandhi · Answer 3 · 2016-01-05T11:12:04.573

I have used html and css in order to make those tabs scrolllable. I would like to mention that the scrollable tabs feature is not available. However the solution below which I figured out works wonders for me.

You can go on configuring the tabs array with unlimited data in it.

NOTE: you will not be able to scroll on browser during development, but as soon as you install the app it will work on swipes ... works also in ionic view

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 THE SAME NOTE: I am using 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 for changing the 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);

sample json for tabs

$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"
                    }
];

Ionic scrollable tabs

3 Answers3