rodrigo-fonseca/slide-tabs-ionic

Ionic slide tabs

slide-tabs-ionic (simple slide tabs for ionic)

Ionic version >= 1.2.0 (tested with ionic 1.3.2);

DEMO

I made this using Swiper API based on Ionic Starter App (ionic start myApp tabs) from here: http://ionicframework.com/getting-started/
All you have to do is get this example and change these files below:

• js/app.js
• js/controllers.js
• css/style.cs

And add this:

• templates/dashboard.html

- Insert slide for every section (status, chat and account view) (templates/dashboard.html)

<ion-view view-title="Dashboard">

  <!-- Here is where you put your tabs-->
  <div class="tabs tabs-icon-only">
      <a class="tab-item"
        ng-class="{active: vm.dashboard.activeIndexView === 0}"
        ng-click="vm.dashboard.slideTo(0)">
          <i class="icon ion-ios-pulse"></i>
      </a>
      <a class="tab-item"
         ng-class="{active: vm.dashboard.activeIndexView === 1}"
         ng-click="vm.dashboard.slideTo(1)">
          <i class="icon ion-ios-chatboxes-outline"></i>
      </a>
      <a class="tab-item"
         ng-class="{active: vm.dashboard.activeIndexView === 2}"
         ng-click="vm.dashboard.slideTo(2)">
          <i class="icon ion-ios-gear-outline"></i>
      </a>
  </div>

  <ion-content class="padding">
    <ion-slides options="{keyboardControl: true, initialSlide: 0}" slider="dashboard.slider">

      <!-- status view -->
      <ion-slide-page>
        <div class="list card" ng-controller="DashCtrl">
          <div class="item item-divider">Recent Updates</div>
          <div class="item item-body">
            <div>
              There is a fire in <b>sector 3</b>
            </div>
          </div>
        </div>
        <div class="list card">
          <div class="item item-divider">Health</div>
          <div class="item item-body">
            <div>
              You ate an apple today!
            </div>
          </div>
        </div>
        <div class="list card">
          <div class="item item-divider">Upcoming</div>
          <div class="item item-body">
            <div>
              You have <b>29</b> meetings on your calendar tomorrow.
            </div>
          </div>
        </div>
      </ion-slide-page>

      <!-- chat view -->
      <ion-slide-page>
        <ion-list ng-controller="ChatsCtrl">
          <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/chats/{{chat.id}}">
            <img ng-src="{{chat.face}}">
            <h2>{{chat.name}}</h2>
            <p>{{chat.lastText}}</p>
            <i class="icon ion-chevron-right icon-accessory"></i>

            <ion-option-button class="button-assertive" ng-click="remove(chat)">
              Delete
            </ion-option-button>
          </ion-item>
        </ion-list>
      </ion-slide-page>

      <!-- account view -->
      <ion-slide-page>
        <ion-list ng-controller="AccountCtrl">
          <ion-toggle  ng-model="settings.enableFriends">
              Enable Friends
          </ion-toggle>
        </ion-list>
      </ion-slide-page>

    </ion-slides>
  </ion-content>
</ion-view>

• Insert DashboardController (js/controllers.js)

.controller('DashboardController', function ($scope) {
    var that = this;

    this.dashboard = {swiper: false, slider: false, activeIndexView: 0};
    $scope.$on("$ionicSlides.sliderInitialized", function(event, data) {
        if (!data || !data.slider) {
            return;
        }

        that.swiper = data.slider;
    });

    $scope.$on("$ionicSlides.slideChangeStart", function (event, data) {
        if (!data || !data.slider || !data.slider.snapIndex < 0) {
            return;
        }

        if(!$scope.$$phase) {
            $scope.$apply(function () {
                that.dashboard.activeIndexView = data.slider.snapIndex;
            });
        } else {
            that.dashboard.activeIndexView = data.slider.snapIndex;
        }
    });

    this.dashboard.slideTo = function (indexSlide) {
        that.swiper.slideTo(indexSlide);
    };
});

• Change your states like this below (js/app.js)

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider
  // Each tab has its own nav history stack:
  .state('dashboard', {
    url: '/dashboard',
    templateUrl: 'templates/dashboard.html',
    controller: 'DashboardController as vm'
  })
  .state('chat-detail', {
    url: '/chats/:chatId',
    templateUrl: 'templates/chat-detail.html',
    controller: 'ChatDetailCtrl'
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/dashboard');

});

• And add this to your style (css/style.css)

.scroll{
	height:100%;
}
.swiper-pagination {
	display: none;
}
.swiper-container {
	overflow-x:hidden;
	overflow-y:scroll;
}
.scroll-content {
	margin-bottom: 42px;
}

.tab-item {
	opacity:0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=0.5);
}
.tab-item.tab-item-active i, .tab-item.active i, .tab-item.activated i {
    color: #444444 !important;
}