Ionic 1: Sliding Tabs Implementation

Today in almost every application we have sliding tabs e.g. Facebook , Paytm. So for implementing sliding tabs we can use Sliding Box.

Add tabSlideBox.scss with the following code in your application .

 .tabbed-slidebox .slider {  
   height: 100%;  
 }  
 .tabbed-slidebox.btm .slider {  
   margin-bottom: -50px;  
 }  
 .tabbed-slidebox .slider-slides {  
   width: 100%;  
 }  
 .tabbed-slidebox .slider-slide {  
   padding-top: 0px;  
   color: #000;  
   background-color: #fff;  
   text-align: center;  
   font-weight: 300;  
   background-color: #0398dc;  
 }  
 .tabbed-slidebox .tsb-icons {  
   text-align: center;  
   margin: 10px 0;  
   position: relative;  
      background-color:#fff;  
 }  
 .tabbed-slidebox .tsb-ic-wrp {  
   display: flex;  
   position: relative;  
      -webkit-transition: -webkit-transform 0.3s; /* For Safari 3.1 to 6.0 */  
      -webkit-transform:translate3d(0,0,0);  
 }  
 .tabbed-slidebox .tsb-icons a {  
   display: inline-block;  
   width: 54px;  
   font-size: 2.5em;  
   color: rgba(0, 0, 0, 0.3);  
      -webkit-transform:translate3d(0,8px,0);  
 }  
 .tabbed-slidebox .tsb-icons a.active {  
   color: rgba(0, 0, 0, 1);  
   font-size: 3.5em;  
      -webkit-transform:translate3d(0,0,0);  
 }  
 .tabbed-slidebox .tabbed-slidebox {  
   position: relative;  
   height: 100%;  
   overflow: hidden;  
 }  
 .tabbed-slidebox .tsb-icons:after {  
   width: 0;  
   height: 0;  
   border-style: solid;  
   border-width: 0 1.4em 1.4em 1.4em;  
   border-color: transparent transparent #0398dc transparent;  
   position: absolute;  
   content: "";  
   display: block;  
   bottom: -12px;  
   left: 50%;  
   margin-left: -14px;  
 }  
 .tsb-hscroll.scroll-view{  
       white-space: nowrap;  
      margin:0 auto;  
 }  
 .tsb-hscroll.scroll-view .scroll-bar{  
      visibility:hidden;  
 }  
 .tsb-hscroll.scroll-view .scroll.onscroll{  
      -webkit-transition: -webkit-transform 0.3s; /* For Safari 3.1 to 6.0 */  
 }  
 .tabbed-slidebox .tsb-icons .scroll a{  
      width:auto;  
      font-size: 1.5em;  
      line-height: 1.5em;  
      text-decoration: none;  
      margin: 0 15px;  
      border-bottom: 3px solid transparent;  
 }  
 .tabbed-slidebox .tsb-icons .scroll a.active {  
      font-size: 1.8em;  
      border-bottom: 3px solid #ccc;  
 }  

And tabSlideBox.js  in your lib folder and include it into your index.html under libraries section in side the script tag. tabSlideBox.js attached file tabslider

Include  tabSlideBox  as a module for your app

 var app = angular.module('slidebox', ['ionic', 'tabSlideBox']);  

The Ionic Code to implement the scroll-able tabs  using ng-repeat is as follows:

Here by default middle tab will be selected. To make another tab active you should take a variable tab and set it accordingly.

  <ion-view title="Scrollable Tabbed Slide box">  
     <ion-content scroll="false">  
           <tab-slide-box id="sibling_id" tab="0">  
                       
  
                            
  
                                      
                                         {{tab}}  
                                      
                               
  
                       </div>  
                    <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">  
                      <ion-slide>  
                        <h3>Home content</h3>  
                      </ion-slide>  
                      <ion-slide>  
                        <h3>Games content</h3>  
                      </ion-slide>  
                      <ion-slide>  
                        <h3>Mail content</h3>  
                      </ion-slide>  
                    </ion-slide-box>  
           </tab-slide-box>  
     </ion-content>  
    </ion-view>  

The code for the controller:

 app.controller("IndexCtrl", [ "$scope",function($scope){   
            $scope.tabs = ['Home', 'Games', 'Mail'];   
           }   
  ]);   

Reference:https://market.ionic.io/plugins/tabbedslidebox