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

问题描述：

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

答

我找到了答案：

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

是标签的数量。

答

设置和翻转一个类。

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

答

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

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

希望这将有助于:)

答

官方的方法是：

更改为标签的theme/variables.scss

活动图标机器人是：

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

在iOS

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

退房Sass variables for ionic

答

这是一种适合我的工作，

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

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

相关推荐