Ion-tabs page solid black when added to Hello Ionic

Ionic Framework ionic-v3
1

I was trying to experiment with navigation with Ionic 2. I started with the Hello Ionic starter application and added a page with ion-tabs and 3 ion-tab’s. When I run it the page with the ion-tabs just shows up as solid black.

My example project is here: https://github.com/abierbaum/ionic2_test/tree/ion_tabs_bug

The new components are:

tabs-page.html

<ion-tabs>
   <ion-tab tabIcon="water" [root]="tabCmp" [rootParams]="tabOne"></ion-tab>
   <ion-tab tabIcon="angular" [root]="tabCmp" [rootParams]="tabTwo"></ion-tab>
   <ion-tab tabIcon="cloud" [root]="tabCmp" [rootParams]="tabThree"></ion-tab>
</ion-tabs>

tabs-page.ts

import { Component } from '@angular/core';

import {
   NavController,
} from 'ionic-angular';

import {
   TabContent,
} from './tab-content';


@Component({
   templateUrl: 'tabs-page.html',
})
export class TabsPage {
   navCtrl: NavController;

   tabCmp: TabContent;

   tabOne = {name: 'Tab 1'};
   tabTwo = {name: 'Tab 2'};
   tabThee = {name: 'Tab 3'};

   constructor(navCtrl: NavController) {
      this.navCtrl = navCtrl;
   }
}

tab-content.html

 <ion-header>
   <ion-navbar><ion-title>{{name}}</ion-title></ion-navbar>
</ion-header>
<ion-content>
   <p>This is the tab for {{name}}</p>
</ion-content>

tab-content.ts

import { Component } from '@angular/core';

import {
   NavParams,
} from 'ionic-angular';

@Component({
   templateUrl: 'tab-content.html',
})
export class TabContent {
   name: string = '';

   constructor(navParams: NavParams) {
      this.name = navParams.get('name');
   }
}

Anyone see anything obvious? There are no compiler error or console log messages of note.

1 Like
2

I still haven’t been able to solve this. Is there any place to find examples of using ion-tabs in this way for navigation?

3

I ran into the same issue when trying to copy the demo tabs example from the ionic github project into my page.

I checked the documentation site again and found that the demonstration there also has the same black page: Is this a known issue?

image
tabs_docs.png1198×867 118 KB

Note: I did find that if I copied this bit of css the tabs should show up but they would not appear to control anything:


ion-tabs:first-child {
  margin-top: 60px;
}

ion-tabs {
  margin-bottom: 20px;
}

ion-tabs,
ion-tabs .tabbar {
  position: relative;
  top: auto;
  height: auto;
  visibility: visible;
  opacity: 1;
}

See: https://github.com/driftyco/ionic/blob/v2.0.0-rc.0/demos/src/tabs/style.css

4

I’m having the same issue. Still, couldn’t solve it…