Masquage des onglets sur les sous-pages lors de l'utilisation de super-onglets ioniques2

Question

J'utilise des super-onglets ioniques2 et cela fonctionne bien. Le seul problème est que je ne suis pas capable de se cacher sur TabBar sous-pages, comme je l'habitude de faire lors de l'utilisation et la mise en tabsHideOnSubPages: « True » dans app.module.ts

est-il un moyen de cacher les onglets sur les sous-pages lors de l'utilisation ionic2-super-tabs?

Answer 1

Je l'ai fait de la façon suivante

Mon fichier Tabs.html a 4 pages racine.

dans les pages racine:

this.tabBarElement = document.querySelector('super-tabs-toolbar'); 

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

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

Et enfin dans le supertabs css marque hauteur 100% que par défaut, il fixe hauteur calc (100% - 72px), qui pousse la page vers le bas, lorsque l'onglet la barre est cachée.

Alors apportez les modifications que

super-tabs-container { { 
    height: calc(100%)! important; 
} 

Answer 2

ionic2-super-pattes a une référence à son NavController nommé rootNavCtrl qui est ajouté automatiquement aux NavParams de tous les sous-onglets. Cela vous permet de pousser des pages depuis la page racine plutôt que vers l'intérieur. De cette façon, votre sous-page est placée en haut de la page des super-onglets et couvre la barre d'onglets.

En supposant que votre page super-onglets a un onglet Page1Page vous pouvez le faire ...

export class Page1Page { 

    rootNavCtrl: NavController; 

    constructor(public navParams: NavParams) { 
    //get a reference to the NavController of super-tabs 
    this.rootNavCtrl = navParams.get('rootNavCtrl'); 
    } 

    pushSubPage() { 
    //use it to push your new subpage 
    this.rootNavCtrl.push('PageToPush'); 
    } 

} 

Voir l'exemple à https://github.com/zyra/ionic2-super-tabs-example/blob/master/src/pages/page1/page1.ts#L22

Answer 3

Ajouter code suivant sur les fichiers de vos pages racine. URL Référence https://github.com/zyra/ionic2-super-tabs

Exemple rootPage1.ts page

import { SuperTabsController } from 'ionic2-super-tabs';

export class rootPage1 { 
constructor(private superTabsCtrl: SuperTabsController){}  
ionViewWillLeave() { 
    this.superTabsCtrl.showToolbar(false); 
} 

ionViewWillEnter() { 
    this.superTabsCtrl.showToolbar(true); 
} 
}