web-dev-qa-db-fra.com

Ionic Framework cache les onglets sur une page spécifique

J'utilise un framework ionique et j'ai créé une nouvelle application à onglets.

Ce que je dois faire est d’avoir une page par défaut ou une page d’accueil qui n’a pas les onglets, puis tout le reste pour que les onglets soient normaux.

Comme une page de destination.

Comment puis-je faire ceci?

ionic-frameworkionic
14
Satch3000

Dans les versions ioniques récentes, ceci est facilement réalisé en définissant 

$ionicTabsDelegate.showBar(false);

Exemple de code:

.directive('hideTabs', function($rootScope, $ionicTabsDelegate) {
  return {
    restrict: 'A',
    link: function($scope, $el) {
      $scope.$on("$ionicView.beforeEnter", function () {
        $ionicTabsDelegate.showBar(false);
      });
      $scope.$on("$ionicView.beforeLeave", function () {
        $ionicTabsDelegate.showBar(true);
      });
    }
  };
})

SOURCE

8
Ladmerc

Plunker Demo

Définissez d’abord un $stateProvider séparé pour la page de destination ou la page par défaut [je pense que vous avez déjà défini un $stateProvider pour d’autres pages] dansapp.js. Le fichierapp.jsdevrait ressembler à ceci,

app.js 

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

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tabs', {
      url: '/tab',
      controller: 'TabsCtrl',
      templateUrl: 'tabs.html'
    })
    .state('tabs.home', {
      url: '/home',
      views: {
        'home-tab': {
           controller: 'homeCtrl',
          templateUrl: 'home.html'
        }
      }
    })  
    .state('tabs.settings', {
      url: '/settings',
      views: {
        'settings-tab': {
           controller: ' signOutCtrl',
          templateUrl: 'settings.html'
        }
      }
    });
     $stateProvider
        .state('landing', {
            url: '/landing',
            controller: 'landingCtrl',
            templateUrl: 'landing.html'
    });

  $urlRouterProvider.otherwise('/landing');
});

Créez également une page HTML pour les onglets.

tabs.html 

<ion-view title="Home">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>
    <ion-tabs class="tabs-icon-top tabs-positive">
        <ion-tab title="{{tab1Title}}" icon="ion-home" href="#/tab/home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="{{tab2Title}}" icon="ion-gear-a" href="#/tab/settings">
            <ion-nav-view name="settings-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="{{tab3Title}}" href="#/landing" icon="ion-log-out">
        </ion-tab>
    </ion-tabs>
</ion-view>

Aussi, vous devez masquer <ion-nav-bar> dans votrelandingpage en utilisant hide-nav-bar="true ".

landing.html 

<ion-view hide-nav-bar="true ">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>
    <ion-content padding="true">
        <h1 style="text-align: center;">Welcome To Landing Page</h1>
        <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Lets Go</a>
    </ion-content>
</ion-view>
8
Muhsin

C'est si simple d'essayer ça 

<!-- in your tabs.html add this ng-class -->
    <ion-tabs ng-class="{'tabs-item-hide': hideTabs}">

    </ion-tabs>

    <!-- add 'hide-tabs'in your view where you want to hide the tabs -->
    <ion-view hide-tabs> 

    </ion-view>

    // in your app.js add a directive
    .directive('hideTabs', function($rootScope) {
        return {
            restrict: 'A',
            link: function($scope, $el) {
                $rootScope.hideTabs = true;
                $scope.$on('$destroy', function() {
                    $rootScope.hideTabs = false;
                });
            }
        };
    })
6
Pritish

Essayez ceci est un exemple simple…

Étape 1) L'application par défaut comporte trois onglets dans la barre d'onglets, à savoir home , à propos de et contact . Supposons que nous souhaitons masquer la barre d’onglet lorsque l’utilisateur accède à l’onglet A propos de. Pour cela, nous devrons apporter des modifications au fichier about.ts que vous pouvez trouver à l’adresse suivante:

about.ts 

export class AboutPage {
  tabBarElement: any;
  constructor(public navCtrl: NavController) {
    this.tabBarElement = document.querySelector('.tabbar.show-tabbar');
  }

  ionViewWillEnter() {
    this.tabBarElement.style.display = 'none';
  }

  ionViewWillLeave() {
    this.tabBarElement.style.display = 'flex';
  }

Étape 2) about.html 

<ion-header>
  <ion-navbar>
       <ion-buttons left>
        <button ion-button icon-only (click)="takeMeBack()">
           <ion-icon name="arrow-back"></ion-icon>
       </button>
     </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  This is About Page Tab bar is Hidden.
</ion-content>
Step 3)

about.ts 

 takeMeBack() {
    this.navCtrl.parent.select(0);
  }
0
core114