Question

在标题中，我想更改所选标签的背景颜色。我没有在文档中找到允许这个的任何变量。（http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/）。怎么实现呢？

Answer 1

对于Ionic 2＆amp; 3

在页面scss文件中覆盖此类。

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

希望这会有所帮助：）

Answer 2

官方方式是：

更改theme/variables.scss

android 标签上的有效图标为：

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

在iOS上

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

查看Sass variables for ionic

Answer 3

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

在“ variables.scss”文件中添加具有基本和对比度属性的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>

就这样，现在您完成了。 ☺

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

但是如果你想覆盖离子的变量，你应该使用

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

我找到了答案：

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

0 是标签的数量。

Answer 6

这对我有用，

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

Answer 7

最简单的方法是;

$颜色（ 'primary'：'＃83717B' ）

Ionic2标签 - 如何更改所选标签的颜色？

7 个答案: