Ionic 2 Tabs en haut et en bas

Question

Je voudrais faire un tabs component qui a certains onglets en haut de l'écran et d'autres en bas, y a-t-il un moyen d'y parvenir ?

Quelque chose comme ça :

J'ai essayé d'utiliser deux instances mais je n'y suis pas parvenu et je suppose qu'il sera très difficile de les synchroniser entre elles.

Des idées ?

Answer 1

Vous pouvez également placer un composant d'onglets en haut de votre page. En supposant que vous ayez importé et déclaré le composant TabsComponent Tout ce que vous avez à faire, c'est d'ajouter cet attribut à votre composant app.module.ts

imports: [
IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'})
],

En fait, cela vous permet uniquement de modifier la position de la barre d'onglets.

Answer 2

Vous pouvez combiner une disposition en onglets (onglets en bas) et ajouter une barre d'outils en haut de chaque page avec quelques Segment des composants comme celui-ci :

<ion-header>
  <ion-toolbar>
    <ion-segment [(ngModel)]="topTab" color="secondary">
      <ion-segment-button value="camera">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="bookmark">
        <ion-icon name="bookmark"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

De cette façon, vous auriez des onglets en bas (composant onglets) et des onglets en haut (en-tête avec segments). Je ne sais pas si cela a un sens dans le contexte de votre application, mais en termes d'interface utilisateur, le résultat serait assez similaire à la capture d'écran fournie.

Answer 3

Si vous utilisez Ionic 2 ou 3, voici comment procéder

1. Ouvrir src\app\app.module.ts fichier
2. Passez tabsPlacement:'bottom' comme une valeur d'objet à la onicModule.forRoot() fonction.
3. Passez l'objet comme deuxième argument.
4. Peut utiliser 'top' à la place de 'bottom' pour apparaître en haut de la page
   J'espère que cela fonctionnera pour vous !!!

código source ici .