2016-05-08 14 views
0

私は最近、私のion-tabsのスタイリングをしました。デスクトップとモバイルで異なるタブのレンダリング

これらはデスクトップでは正しく表示されているようですが、モバイルでは表示されないようです。

私は間違っていますか?デスクトップで

enter image description here

ion-tabsビュー正しく。モバイルで

enter image description here

ion-tabsが白になります。

同じように見えるようにするには、何が必要ですか。私はthisを見ていて、明らかにカスタムテーマを作る必要がありますが、より迅速なアプローチがあるかどうか疑問に思っていました。

これは、これまでの私のコードです:

HTML

<ion-tabs class="tabs-icon-top tabs-color-active-positive"> 

    <!-- Home Tab --> 
    <ion-tab icon-off="ion-android-home" icon-on="ion-android-home" ui-sref="tab.home"> 
    <ion-nav-view name="tab-home"></ion-nav-view> 
    </ion-tab> 

    <!-- Notifications Tab --> 
    <ion-tab icon-off="ion-android-notifications" icon-on="ion-android-notifications" ui-sref="tab.notifications"> 
    <ion-nav-view name="tab-notifications"></ion-nav-view> 
    </ion-tab> 

    <!-- Search Tab --> 
    <ion-tab icon-off="ion-android-search" icon-on="ion-android-search" ui-sref="tab.search"> 
    <ion-nav-view name="tab-search"></ion-nav-view> 
    </ion-tab> 

    <!-- Account Tab --> 
    <ion-tab icon-off="ion-android-person" icon-on="ion-android-person" ui-sref="tab.account"> 
    <ion-nav-view name="tab-account"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

SCSS

// Tabs 

.tabs { 
    background-color: #242424; 
} 

ion-tabs.tabs-color-active-positive .tab-item { 
    color: #fff !important; 
} 

.tab-item .icon { 
    padding-top: 2px; 
    height: 48px; 
    font-size: 40px; 
} 

答えて

1

ioniconsのためのクラス定義が取得されていません持っているあなたのionic.cssファイルモバイルビルドの一部としてindex.htmlに含まれています。

ていることを確認してください:

  1. platforms/www/<android/ios>/<path to index.html>でindex.htmlファイルが

  2. ファイルionic.cssをionic.cssへの参照が含まれていますが、必要なパス

でコピーされますAndroidのchrome://inspectのモバイルビルドを調べるか、iosビルド用のsafariを使用して、このファイルがavaであることを確認してくださいあなたのアプリのモバイルビルドでilable可能

関連する問題