私のアプリではイオンタブを使用しています。アクティブなタブと非アクティブなタブのタブアイコンタイトルカラーの色を変更する必要があります。私はいくつかのCSSを試したが、解決策なしで終わった。選択すると、各タブのタイトルに異なる色が必要になります。イオンタブアクティブなタブと非アクティブなタブで異なる色に設定する
0
A
答えて
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;
}
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;
}
ホープこれはあなたを助けます!
関連する問題
- 1. BottomBarの非アクティブなタブの色を設定する方法
- 2. アクティブなタブのみの背景色を設定する方法
- 3. アクティブなタブの色を変更する
- 4. setInterval、firefoxの非アクティブなタブ
- 5. Swift:異なるタブ用に異なるナビゲーションバーボタンを設定する
- 6. jQueryのUIタブ、アクティブなタブ
- 7. jQueryUIタブ...非アクティブなタブにコンテンツを追加するには、コンテンツが
- 8. ブートストラップのアクティブなタブの色をインラインで変更する
- 9. マテリアルUIタブ - アクティブ - アクティブなアクティブなonclickを変更する
- 10. 材料タブでタブをアクティブに設定します。
- 11. 特定のタブがアクティブなときにjqueryをトリガーする
- 12. jQuery - ajaxタブとクッキーを使ってアクティブなタブを覚える
- 13. アクティブなタブを設定するためにTabpanelでブートストラップ・モーダルを使用する
- 14. chrome.tabs.reload()でアクティブなタブ以外のタブをリロードする
- 15. 各タブに異なるメッセージベースを設定していますか?
- 16. setIntervalが非アクティブなタブで減速しない
- 17. スクリプトが非アクティブなタブで動作しない
- 18. NimbusのJTabbedPaneタブごとに色が異なる
- 19. ブートストラップのアクティブなタブがドロップダウン・タブで機能しない
- 20. デスクトップとモバイルで異なるタブのレンダリング
- 21. アクティブなタブは、CSSを使用して非アクティブなタブを指していますか?
- 22. Androidタブホストのアクティブなタブ
- 23. タブのアクティブな効果
- 24. アクティブなタブのインデックスを取得する
- 25. アクティブなタブにクラスを表示する休憩タブのクラスを持たない
- 26. htmlの既定のアクティブな/開いているタブを設定する方法
- 27. 角度UIブートストラップを使用して動的に作成されたタブでアクティブなタブを設定する
- 28. カスタマイズされたタイトルバーの非アクティブな色を設定する
- 29. アクティブなタブの色を変更するにはどうすればいいですか? (タブはカスタムです)
- 30. 異なるタブ内のボタン
我々がチェックし、助けるために試すことができますので、あまりにもフィドルにあなたのコードを投稿してください。コードなしでは、私たちは手助けできません。 –
コードを示すコードやデモリンクを追加してください –