web-dev-qa-db-fra.com

Ionic 2 onglets en haut et en bas

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

Quelque chose comme ça:

enter image description here

J'ai essayé d'utiliser deux instances mais je n'ai pas pu le faire et je suppose que ça va être très difficile de synchroniser entre elles.

Des idées?

ionic-frameworktabsionic2componentsionic3
11
Mehdi Guelloub

Vous pouvez également avoir TabsComponent en haut de votre page. En supposant que vous avez importé et déclaré TabsComponent Tout ce que vous avez à faire est d'ajouter cet attribut à votre app.module.ts

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

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

16
CharithW

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

<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 du sens dans le contexte de votre application, mais en termes d'interface utilisateur, le résultat serait assez similaire à la capture d'écran fournie.

5
sebaferreras

Si vous utilisez Ionic 2 ou 3 voici le moyen-

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

code source ici .

4
S.Yadav