web-dev-qa-db-fra.com

Comment masquer les onglets dans Ionic Framework

J'ai choisi la vue de l'onglet ionic afin que je puisse utiliser le système de modèle mais je ne peux pas supprimer les onglets. Je veux une vue comme celle-ci et j'ai réussi à supprimer la barre d'en-tête mais je ne peux pas supprimer la barre des onglets

enter image description here

Voici ce que j'ai obtenu jusqu'à présent:

enter image description here

Si je cache la barre des onglets (ion-tabs{display:none}) il supprime également le contenu, ce qui n'est pas ce que je veux.

jquerycssionic-framework
26
Sinan Samet

Jetez un oeil à la documentation de l'onglet ionique :

Pour masquer la barre d'onglets tout en affichant le contenu, ajoutez la classe "tabs-item-hide".

Vous changeriez donc ceci:

<div class="tabs">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>

pour ça:

<div class="tabs tabs-item-hide">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>
26
Sly_cardinal

Je sais que cela a déjà été répondu, mais il existe une "manière plus angulaire" de le faire qui pourrait être utile. Pour ce faire, vous utilisez une directive personnalisée que vous pouvez appliquer aux vues que vous ne souhaitez pas afficher la barre d'onglets inférieure.

Ma solution à cela sur mon application était:

1 - Utilisez ng-hide lié à une variable rootScope dans la barre d'onglets, donc je peux le cacher/l'afficher dans n'importe quel contrôleur/vue de mon application:

<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

2 - Créez une directive personnalisée qui, lorsqu'elle est présente, masquera la barre d'onglets (et affichera à nouveau la barre d'onglets lorsque la vue est détruite/fermée:

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

3 - Appliquez-le à des vues spécifiques qui n'ont pas besoin que la barre d'onglets soit visible:

<ion-view title="New Entry Form" hide-tabs>
    <!-- view content -->
</ion-view>

ps: Je pense que cela peut être amélioré encore plus en évitant le besoin de ng-hide sur le <ion-tabs> déclaration, laissant la directive faire tout le "sale boulot".

30
Daniel Rochetti

La réponse de Daniel était très proche (merci!) Mais n'a pas tout à fait fonctionné dans mon cas:

  1. ng-hide masque l'onglet conten ainsi que les onglets (pour moi, en tout cas)
  2. Je souhaite masquer conditionnellement les onglets en passant une expression à la directive.

Voici donc mon modèle modifié:

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs -->
</ion-tabs>

Directive (toujours basée sur celle de Daniel):

var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$watch(attributes.hideTabs, function(value){
                $rootScope.hideTabs = value;
            });

            scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

Usage:

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>
24
Dunc

J'ai utilisé la réponse de dotfrank et cela a fonctionné comme un charme, sauf quand je suis allé quelques couches profondément dans la vue d'un onglet spécifique, puis j'ai utilisé le bouton de retour. Pour revenir à une vue qui a la directive "hideTabs = 'true'", elle sera en fait définie sur "false" à moins que vous n'encapsuliez $ watch sur hideTabs dans l'événement $ ionicView.beforeEnter.

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {

            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });

            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

J'espère que cela t'aides! (aussi, c'est ma première réponse ... donc si je manque complètement quelque chose, alors pardonne ma noblesse).

10
Alex Pavia

La réponse de Dunc est très bonne, mais ne fonctionne pas le mieux quand il s'agit de la mise en cache de la vue d'Ionic.

L'événement $ destroy est utilisé, ce qui définira la variable $ rootScope lorsque la vue parent est détruite.

Cependant, comme d'autres l'ont commenté, cet événement $ destroy se produit trop tard lors du retour à une page qui a besoin d'onglets. Cela provoque un comportement nerveux retardé sur les transitions de page. De plus, la classe ion-content .has-tabs n'est ajoutée qu'après le délai, donc tout contenu est également couvert par les onglets.

Au lieu de cela, nous devons réinitialiser l'événement Ionic beforeLeave, pour garantir que le cycle de résumé de la transition obtient le changement de variable dans le temps.

Même modèle:

<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only">
    <!-- tabs --> 
</ion-tabs>

Directive (encore une fois basée sur Dunc):

.directive('hideTabs', function($rootScope) {
  return {
      restrict: 'A',
      link: function(scope, element, attributes) {
          scope.$watch(attributes.hideTabs, function(value){
              $rootScope.hideTabs = value;
          });

          scope.$on('$ionicView.beforeLeave', function() {
              $rootScope.hideTabs = false;
          });
      }
  };
});

L'utilisation est la même -

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>

Pour un bonus, si vous utilisez SASS, vous pouvez obtenir une transition popup agréable pour votre barre d'onglets si vous ajoutez ceci à votre fichier .scss:

.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}

Si vous utilisez Vanilla CSS, remplacez $ tabs-height par la hauteur de votre barre.

8
dotfrank

Ng-if a été la seule directive qui a fonctionné pour moi.

ng-if="$root.showList"

J'espère que cela aide.

2
jlopez

Malheureusement, les réponses actuelles ont un décalage avant d'afficher à nouveau les onglets. Il semble que $ scope soit $ détruit un peu en retard et lorsque vous accédez à une page qui devrait avoir des onglets, il y a un décalage avant qu'ils ne soient affichés à nouveau. Cependant, le lien de Paul m'a amené à une meilleure solution qui n'a aucun retard:

app.controller('applicationController', function ($state, $rootScope) {  

    var hideTabsStates = ['tab.inbox-convo']; 

    $rootScope.$on('$ionicView.beforeEnter', function () {
        $rootScope.hideTabs = ~hideTabsStates.indexOf($state.current.name)
    });
});

<ion-tabs ng-class="{ 'tabs-item-hide': $root.hideTabs }">
1
parliament

Vous devez simplement mettre un code simple dans le contrôleur de page comme celui-ci.

angular
   .module('app.module')
   .controller('pageController', function ($scope, $rootScope, $state, $ionicTabsDelegate) {
    /* hide tabs on page show */
    /* 0 = hide, 1 = show */
    $scope.$on('$ionicView.enter', function() {
        $ionicTabsDelegate.showBar(0);
    });
});

Fugital.com

1
Wasi

Le remplacement CSS simple a fonctionné pour moi exemple dans codepen , mon exigence était de masquer les onglets principaux pour les vues enfant/intérieures, par exemple les vues popup + cela n'affecte pas les onglets secondaires:

<style>
    /* hide the main tabs */
    .tab-nav{
        display: none;
    }
    /* this takes care of the access margins bottom or top tabs */
    .has-tabs, .has-tabs-top, .has-tabs-bottom {
        bottom: 0px !important;
        top: 0px !important;
    }   
</style>

OU dans l'exemple de directive:

angular.element(".tab-nav").css("display":"none");

N'oubliez pas:

<ion-view hide-nav-bar="true"></ion-view>
<ion-content has-footer="false" has-header="false></ion-content>
1
Elroy