イオンタブが正しく表示されない

Question

私はIonic2を使用しています。クリックすると、ユーザーを相対ペ​​ージに送信する2つの選択肢があるタブメニューが必要です。 これは私がやったことです：

tabsexample.html

<ion-content padding> 
<ion-tabs> 
    <ion-tab [root]="tab1Root">First Page Tab</ion-tab> 
    <ion-tab [root]="tab2Root">Second Page Tab</ion-tab> 
</ion-tabs> 
</ion-content> 

私は生成された相対ページとtabsexample.tsはこのようなものです：

import {FirstPage} from '../first-page/first-page'; 
import {SecondPage} from '../second-page/second-page'; 
export class tabsexamplePage { 

    tab1Root = FirstPage; 
    tab2Root = SecondPage; 
    constructor(private navCtrl: NavController) { 

    } 

は、私は何を得ることですタブテキストなしの白いバー（First Page TabおよびSecond Page Tab）。さらに、2つのタブが画面の全幅を埋めるので、2番目のタブは最初のタブの下にあります。代わりに、このようにそれを行うための

Answer 1

：

<ion-content padding> 
<ion-tabs> 
    <ion-tab [root]="tab1Root">First Page Tab</ion-tab> 
    <ion-tab [root]="tab2Root">Second Page Tab</ion-tab> 
</ion-tabs> 
</ion-content> 

ちょうどion-tabs要素を含むが、ion-contentラッパーなし：

<ion-tabs> 
    <ion-tab [root]="tab1Root">First Page Tab</ion-tab> 
    <ion-tab [root]="tab2Root">Second Page Tab</ion-tab> 
</ion-tabs>