Ionic2选项卡 - 如何更改选定选项卡的颜色？

Question

和标题一样，我想更改选定选项卡的背景颜色。我没有发现任何允许在文档中使用的变量。 （http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/）。如何实现它？

Answer 1

我找到了答案：

#tab-t1-0[aria-selected=true] { 
    background-color: red; 
    color: #000; 
} 

是标签的数量。

Answer 2

设置和翻转一个类。

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"> 

Answer 3

覆盖t他的课在您的页面scss文件中。

.tabs-md .tab-button[aria-selected=true] { 
    color: #fff; /*your text color */ 
    background: #808080; /* your background color*/ 
} 

希望这将有助于:)

Answer 4

官方的方法是：

更改为标签的theme/variables.scss

活动图标机器人是：

$tabs-md-tab-icon-color-active: red;

在iOS

$tabs-ios-tab-icon-color-active: red;

退房Sass variables for ionic

Answer 5

这是一种适合我的工作，

对于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; 
    }