私は最近、私のion-tabs
のスタイリングをしました。デスクトップとモバイルで異なるタブのレンダリング
これらはデスクトップでは正しく表示されているようですが、モバイルでは表示されないようです。
私は間違っていますか?デスクトップで
:
ion-tabs
ビュー正しく。モバイルで
:
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;
}