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

【问题标题】：Ionic2 tabs - how to change selected tab's color?Ionic2 选项卡 - 如何更改选定选项卡的颜色？
【发布时间】：2019-01-03 14:28:37
【问题描述】：

就像标题一样，我想更改所选标签的背景颜色。我在文档中没有找到任何允许这样做的变量。 (http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/)。如何实现？

【问题讨论】：

标签： ionic2

【解决方案1】：

对于离子 2 和 3

在你的页面 scss 文件中覆盖这个类。

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

希望这会有所帮助:)

【讨论】：

谢谢@AbhishekTomar 让我知道。很快就会更新答案。

【解决方案2】：

官方的做法是：

更改您的theme/variables.scss

android 上标签的活动图标是：

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

在 iOS 上

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

查看Sass variables for ionic

【讨论】：

【解决方案3】：

我认为您已经找到了解决方案，但仍有任何其他开发人员仍在寻找最简单灵活的方法来实现它，您可以按照这些简单的步骤来实现它 -

在 "variables.scss" 文件中添加这个带有 base 和 contrast 属性的 extralight scss 变量，并在 ion-tabs html 标签中添加 color="extralight" 属性 -

$colors: (
  primary:    #00a7ff,
  secondary:  #00edc5,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  extralight: (
    base: #ffffff,
    contrast: #4a4a4a
  )
);

$tabs-ios-tab-text-color-active:  #00a7ff !important;
$tabs-md-tab-text-color-active:   #00a7ff !important;
$tabs-md-tab-icon-color-active	:  #00a7ff !important;
$tabs-ios-tab-icon-color-active	:  #00a7ff !important;

<ion-tabs color="extralight">
    <ion-tab [root]="complaintRoot" tabTitle="Complaint" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="paymentRoot" tabTitle="Payment" tabIcon="card"></ion-tab>
</ion-tabs>

就是这样，现在你已经完成了。 ☺

【讨论】：

【解决方案4】：

设置和翻转课程。

f.e.在你的构造函数集中：

document.getElementById("tab1").className = "tab";
document.getElementById("tab2").className = "tab";
document.getElementById("tab3").className = "tab active";

并设置一些 css

tab.active{
  background-color: black;
}

但如果你想覆盖 ionic 的变量，你应该使用

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

【讨论】：

【解决方案5】：

我找到了答案：

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

0 是标签的数量。

【讨论】：

【解决方案6】：

这对我有用，

对于安卓，

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

【讨论】：

【解决方案7】：

最简单的方法是；

$颜色( “主要”：“#83717B” )

【讨论】：