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
C'est ce que j'ai obtenu jusqu'à présent:
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.
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>
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".
la réponse de Daniel était très proche (merci!), mais n'a pas bien fonctionné dans mon cas:
ng-hide
masque l'onglet contenu, ainsi que les onglets (pour moi, de toute façon)- 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>
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).
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.
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 }">
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>
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);
});
});
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