離子選項卡無法正確顯示

我正在使用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個選項卡填充屏幕的整個寬度，因此第二個選項卡位於第一個選項卡的下方。

來源

2016-09-23 splunk

而不是做它像這樣的：

<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>

來源

2016-09-24 04:54:02 sebaferreras

離子選項卡無法正確顯示

回答

相關問題