Comment puis-je Cacher les onglets dans le cadre ionique

j'ai choisi la vue d'onglet ionique donc je peux utiliser le système de templating mais je ne peux pas enlever 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 d'onglets

enter image description here

C'est 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.

26
demandé sur Sinan Samet 2014-06-02 13:58:20

10 réponses

regardez Ionique de l'onglet documentation:

pour masquer la tabbar mais toujours afficher le contenu, ajouter la classe" tabs-item-hide".

alors vous changeriez ceci:

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

à:

<div class="tabs tabs-item-hide">
  <a class="tab-item" href="#">
    Home
  </a>
  ...
</div>
26
répondu Sly_cardinal 2014-06-02 10:06:47

je sais qu'on a déjà répondu à cette question, mais il y a une façon plus "angulaire" de le faire qui pourrait être utile. Il est fait en utilisant une directive personnalisée que vous pouvez appliquer sur les vues que vous ne voulez pas montrer la barre d'onglet du bas.

Ma solution à ce sur mon application:

1 - Utiliser ng-hide lier à un rootScope variable sur la barre d'onglet, donc je peux me cacher/montrer 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éer une directive personnalisée qui, lorsqu'elle est présente, masquera la barre de tabulation (et montrera la barre de tabulation à nouveau quand la vue est détruite/rejeté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 de la barre d'onglets visible:

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

ps: je pense que cela peut être encore amélioré en évitant la nécessité de l' ng-hide sur le <ion-tabs> déclaration, laissant la directive faire tout le "sale travail".

30
répondu Daniel Rochetti 2014-08-10 07:10:23

la réponse de Daniel était très proche (merci!), mais n'a pas bien fonctionné dans mon cas:

  1. ng-hide masque l'onglet contenu, ainsi que les onglets (pour moi, de toute façon)
  2. je veux cacher conditionnellement les onglets en passant une expression à la directive.

alors voici mon modèle modifié:

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

la Directive (encore une fois basé sur 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;
            });
        }
    };
});

Utilisation:

<ion-view title="New Entry Form" hide-tabs='some-bool-expression'>
    <!-- view content -->
</ion-view>
24
répondu Dunc 2015-02-16 18:22:41

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

.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;
            });
        }
    };
});

espérons que cela aide! (aussi, c'est ma première réponse... donc si je suis complètement absent quelque chose, alors pardonnez ma noobness).

10
répondu Alex Pavia 2015-07-25 20:33:26

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

l'événement $ destroy est utilisé pour définir la variable $rootScope lorsque la vue mère est désactivée.

cependant, comme d'autres l'ont fait remarquer, cet événement $destroy arrive trop tard lorsqu'on retourne à une page qui a besoin d'onglets. Cela provoque un comportement de sursaut retardé sur les transitions de page. En outre, les ions de contenu .la classe has-tabs n'est ajoutée qu'après la retard, de sorte que tout le contenu est couvert par les onglets.

nous devrions plutôt réinitialiser l'événement ionique avant de quitter, pour nous assurer que le cycle de digestion de la transition obtienne 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>

la Directive (encore une fois basé 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;
          });
      }
  };
});

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
répondu dotfrank 2015-07-22 15:38:19

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

ng-if="$root.showList"

j'Espère que ça aide.

2
répondu jlopez 2015-07-10 12:10:21

malheureusement les réponses courantes ont un retard avant de montrer les onglets à nouveau. Il semble que le $ scope soit détruit un peu plus tard et quand vous allez à une page qui devrait avoir des onglets, il y a un décalage avant qu'ils soient remodelés. Cependant, le lien de paul m'a amené à une meilleure solution qui n'a pas de 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
répondu parliament 2015-06-03 03:02:57

Simple CSS remplacent travaillé pour moi exemple dans codepen, mon exigence était de masquer les onglets principaux pour enfant/intérieure points de vue, de l'e.g popup vues + ce n'affectent secondaires onglets:

<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
répondu Elroy 2015-11-27 22:03:04

vous devez simplement mettre un code simple dans le contrôleur de page comme ceci.

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
répondu Wasi 2018-07-23 10:40:53

https://github.com/driftyco/ionic/issues/395 Il semble que les onglets sont de nature délicate dans Ionique. Vérifier le lien, il a travaillé beaucoup pour moi

-1
répondu paul.isache 2015-02-07 16:09:35