Geek Answers Handbook

How can I add a slide function for a nested tab bar in ionic?

How can I add a slide function for the nested tab bar in the ionic structure if we have six tabs, so I want only three tabs of six tabs to appear on the mobile phone screen, and also be able to move left or right to another tab?

My HTML Template

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>

  <body>

    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
          <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

    <script id="templates/tabs.html" type="text/ng-template">

        <ion-tabs class="tabs-icon-top tabs-positive">

            <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
                <ion-nav-view name="about-tab"></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </script>

    <script id="templates/home.html" type="text/ng-template">

        <ion-view title="Home">
            <ion-content class="padding">
               Please check about tab
            </ion-content>
        </ion-view>

    </script>

    <script id="templates/about.html" type="text/ng-template">

        <ion-view title="About">


          <ui-view name="about-page"></ui-view>

        </ion-view>

    </script>

    <script id="templates/about-page1.html" type="text/ng-template">

        <ion-view title="Page 1">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 1</p>
   </ion-content>
 </ion-view>

    </script>

    <script id="templates/about-page2.html" type="text/ng-template">

        <ion-view title="Page 2">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 2</p>
   </ion-content>
 </ion-view>

    </script>

  </body>
</html>

For complete source code, please check out my problem about the nested tab bar on codepen

Note. I just show two sub tabs of six sub tabs in my code example in codefen.

+4
source share
2 answers

Ionic-, on-swipe, on-swipe-left on-swipe-right, . , . http://codepen.io/anon/pen/bdLwPz

about, . BAM! ! : http://ionicframework.com/docs/api/directive/onSwipe/

HTML:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="main">

    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
          <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

    <script id="templates/tabs.html" type="text/ng-template">

        <ion-tabs class="tabs-icon-top tabs-positive">

            <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
                <ion-nav-view name="about-tab" ></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </script>

    <script id="templates/home.html" type="text/ng-template">

        <ion-view title="Home">
            <ion-content class="padding">
               Please check about tab
            </ion-content>
        </ion-view>

    </script>

    <script id="templates/about.html" type="text/ng-template">

        <ion-view title="About">


          <ui-view name="about-page"></ui-view>

        </ion-view>

    </script>

    <script id="templates/about-page1.html" type="text/ng-template">

        <ion-view title="Page 1">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content on-swipe-left="onSwipeLeft()" class="padding has-tabs-top">
     <p> Page 1</p>
   </ion-content>
 </ion-view>

    </script>

    <script id="templates/about-page2.html" type="text/ng-template">

        <ion-view title="Page 2">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 2</p>
   </ion-content>
 </ion-view>

    </script>

  </body>
</html>

JS:

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

    .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })

    .state('tabs.home', {
        url: "/home",
        views: {
            'home-tab': {
                templateUrl: "templates/home.html",
            }
        }
    })

    .state('tabs.about', {
        url: "/about",
        abstract: true,
        views: {
            'about-tab': {
                templateUrl: "templates/about.html"
            }
        }
    })

    .state('tabs.about.page1', {
        url: "/page1",
        views: {
            'about-page': {
                templateUrl: "templates/about-page1.html"
            }
        }
    })

    .state('tabs.about.page2', {
        url: "/page2",
        views: {
            'about-page': {
                templateUrl: "templates/about-page2.html"
            }
        }
    });

    $urlRouterProvider.otherwise("/tab/home");

})
.controller('main', function($scope, $state){

  $scope.onSwipeLeft = function(){
    $state.go('tabs.about.page2')
  };

})
0

, . , .

https://github.com/JKnorr91/ion-slide-box-tabs

<ion-content scroll="false">
<ion-slide-box show-pager="false" ion-slide-tabs>
    <ion-slide ion-slide-tab-label="test"><h1>Tab 1</h1></ion-slide>
    <ion-slide ion-slide-tab-label="secondTest"><h1>Tab 2</h1></ion-slide>
    <ion-slide ion-slide-tab-label="<b>boldTest</b>"><h1>Tab 3</h1></ion-slide>
</ion-slide-box>

slideTabsDirective.js index.html.

. slideTabsDirective.js js, index.html - .

<script src="js/slidingTabsDirective.js"></script>

SCSS CSS slideTabs.scss slideTabs.css .

githup, .

0

More articles:


All Articles