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