和標題一樣,我想更改選定選項卡的背景顏色。我沒有發現任何允許在文檔中使用的變量。 (http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/)。如何實現它?Ionic2選項卡 - 如何更改選定選項卡的顏色?
1
A
回答
1
我找到了答案:
#tab-t1-0[aria-selected=true] {
background-color: red;
color: #000;
}
是標籤的數量。
1
設置和翻轉一個類。
f.e.在構造函數集:
document.getElementById("tab1").className = "tab";
document.getElementById("tab2").className = "tab";
document.getElementById("tab3").className = "tab active";
,並設置一些CSS
tab.active{
background-color: black;
}
但是,如果你想覆蓋離子的變量,你應該使用
$colors(
'primary': '#ffffff'
)
,並在你的HTML設置
<!-- ionic2 beta (using angular 2.0.0-RC.4)-->
<yourTab primary>
<!-- or when using ionic2 RC0 (using angular 2.0.x) -->
<yourTab color="primary">
3
覆蓋t他的課在您的頁面scss文件中。
.tabs-md .tab-button[aria-selected=true] {
color: #fff; /*your text color */
background: #808080; /* your background color*/
}
希望這將有助於:)
1
官方的方法是:
更改爲標籤的theme/variables.scss
活動圖標機器人是:
$tabs-md-tab-icon-color-active: red;
在iOS
$tabs-ios-tab-icon-color-active: red;
0
這是一種適合我的工作,
對於Android,
.tabs-md[tabsLayout=icon-hide] .tab-button,
.tabs-md[tabsLayout=title-hide] .tab-button,
.tabs-md .tab-button.icon-only,
.tabs-md .tab-button.has-title-only {
font-weight: 900 !important;
}
.tabs-md .tab-button[aria-selected=true] .tab-button-text {
-webkit-transform: none !important;
color: #fff;
}
對於iOS,
.tabs-ios[tabsLayout=icon-hide] .tab-button,
.tabs-ios[tabsLayout=title-hide] .tab-button,
.tabs-ios .tab-button.icon-only,
.tabs-ios .tab-button.has-title-only {
font-weight: 900 !important;
}
.tabs-ios .tab-button[aria-selected=true] .tab-button-text {
-webkit-transform: none !important;
color: #fff;
}
相關問題
- 1. 更改選項卡選擇選項卡時的文本顏色
- 2. 如何更改滑動選項卡中選定的選項卡顏色?
- 3. 如何更改actionbarsherlock選項卡顏色和選項卡下的行的顏色?
- 4. 更改選項卡布局選項卡顏色?
- 5. 如何更改活動/選定選項卡的顏色?
- 6. 如何更改tablayout中選定選項卡的顏色?
- 7. 我如何更改jtabbedpane選定的選項卡背景顏色
- 8. 更改選項卡的顏色取決於選擇哪個選項卡
- 9. 更改「選項卡控件」顏色
- 10. 更改UITabBarController選項卡未選中時選項卡圖標顏色
- 11. JavaFX CSS樣式:更改選定選項卡的高亮顏色
- 12. jQuery更改選定選項卡的顏色
- 13. 更改TabLayout的選定選項卡背景和文本顏色
- 14. 背景選項卡的顏色不選擇選項卡
- 15. 如何在選擇時更改顏色選項卡
- 16. jQuery UI選項卡 - 如何更改選項卡的位置
- 17. react-native-router-flux選項卡如何更改選定選項卡的圖標?
- 18. 添加選項卡與選定的假但選項卡設置顏色tabSelectedTextColor
- 19. 如何添加更改選定選項卡的顏色的onclick動作?
- 20. 反應原生選項卡視圖:如何更改選項卡更改上的文本顏色
- 21. WPF選項卡控件:設置選項卡顏色?
- 22. JTabbedPane:更改選項卡標題時更改選項卡大小
- 23. 編輯項目的選項卡顏色
- 24. 如何更改禁用的選項卡控件的顏色
- 25. 如何更改iphone中Tabbar中的選定選項卡項?
- 26. 如何更改Android中以下3個選項卡的顏色?
- 27. 如何更改ActionBar導航選項卡的顏色?
- 28. 如何更改活動離子選項卡的顏色?
- 29. 如何更改Materialise CSS選項卡的下劃線顏色?
- 30. 如何更改holoeverywhere選項卡的顏色?