2016-10-20 19 views
0

私のアプリではイオンタブを使用しています。アクティブなタブと非アクティブなタブのタブアイコンタイトルカラーの色を変更する必要があります。私はいくつかのCSSを試したが、解決策なしで終わった。選択すると、各タブのタイトルに異なる色が必要になります。イオンタブアクティブなタブと非アクティブなタブで異なる色に設定する

+0

我々がチェックし、助けるために試すことができますので、あまりにもフィドルにあなたのコードを投稿してください。コードなしでは、私たちは手助けできません。 –

+0

コードを示すコードやデモリンクを追加してください –

答えて

0

単純な代替案。

<!-- pages/tabs/tabs.html --> 
<ion-tabs color="dark" tabsPlacement="top"> 
    <ion-tab [root]="tab1Root" tabTitle="Todo"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="Plannificator"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="Schedler"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="About"></ion-tab> 
</ion-tabs> 



// themes/variables.scss 
.tabs-md .tab-button { 
    color: #FFC400 !important; 
} 

.tabs-md .tab-button[aria-selected=true] { 
    color: #DD2C00 !important; 
} 

Main Application

0

2つのファイルを変更する必要があります。

あなたが下に表示されるように、あなたのtabs.htmlファイルにいくつかのカスタムクラスを追加する必要があり

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

    <!-- Dashboard Tab --> 
    <ion-tab title="Status" class="dash" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash"> 
    <ion-nav-view name="tab-dash"></ion-nav-view> 
    </ion-tab> 

    <!-- Chats Tab --> 
    <ion-tab title="Chats" class="chat" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats"> 
    <ion-nav-view name="tab-chats"></ion-nav-view> 
    </ion-tab> 

    <!-- Account Tab --> 
    <ion-tab title="Account" class="account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account"> 
    <ion-nav-view name="tab-account"></ion-nav-view> 
    </ion-tab> 


</ion-tabs> 
上記のコードで

クラス=「ダッシュ」クラス=「チャット」クラス= "account"これらは余分に追加されたクラスです。

は、今すぐあなたの/scss/ionic.app.scssファイルにあなたは下記の行を入力する必要があります。

.tab-item.dash.tab-item-active, .tab-item.dash.active, .tab-item.dash.activated { 
    color: $energized !important; 
} 

.tab-item.chat.tab-item-active, .tab-item.chat.active, .tab-item.chat.activated { 
    color: $balanced !important; 
} 

.tab-item.account.tab-item-active, .tab-item.account.active, .tab-item.account.activated { 
    color: $calm !important; 
} 

ホープこれはあなたを助けます!

関連する問題