create tabs in page

Question

I would like to create tabs like these on a page:

As you see Voortgang and pijnniveau are my tabs in the page itself but if I set them like this:

export class ProgressPage {    
    tab1Root = HomePage;
    tab2Root = SchemaPage;

and than in my html template do this:

      <ion-header>
    <ion-navbar color="light">
        <ion-title>{{viewTitle}}</ion-title>
        <ion-buttons end>
            <button ion-button [disabled]="isToday" (click)="today()">Today</button>
            <button ion-button (click)="changeMode('month')">M</button>
            <button ion-button (click)="changeMode('week')">W</button>
            <!--<button ion-button (click)="changeMode('day')">D</button>-->
            <button ion-button (click)="loadEvents()">Load Events</button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content class="has-header">  
  <!--<template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"></template>-->

    <calendar [eventSource]="eventSource"
              [calendarMode]="calendar.mode"
              [currentDate]="calendar.currentDate"
              (onCurrentDateChanged)="onCurrentDateChanged($event)"
              (onEventSelected)="onEventSelected($event)"
              (onTitleChanged)="onViewTitleChanged($event)"
              (onTimeSelected)="onTimeSelected($event)"
              step="30">
    </calendar>


  <ion-list inset>
    <ion-list-header>{{ viewTitle }}</ion-list-header>
    <ion-item>
      <h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
      <p>Fysiotherapie afsrpaak</p>
    </ion-item>

    <ion-item>
      <h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
      <p>Fysiotherapie afsrpaak</p>
    </ion-item>
  </ion-list>
</ion-content>


<ion-tabs color="light" tabsPlacement="top">
  <ion-tab [root]="tab1Root" tabTitle="Missies"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Beloningen"></ion-tab>
</ion-tabs>

But this will looks like this, you see the tabRoot pages under the active page:

How can I fix this?

score 0 · Answer 1 · answered May 21 '17 at 12:51

0

Kindly go to your app.componet.ts file and set the rootPage to ProgressPage. (If this is the opening screen of your app)

If you are using a login screen or if you are navigating from another screen to this screen, then ensure that you are pushing the ProgressPage in the navCtrl.

Hope this helps you. Thanks.

answered May 21 '17 at 12:51

Raja Yogan

918
8
17

Its not about the bottom tabs these are working, but now I want to add 2 tabs in my page but dont know how.. – Sireini May 21 '17 at 12:55

create tabs in page

1 Answers1