Question

我正在尝试将活动离子标签的背景颜色从白色更改为绿色。我找到了这个帖子，但似乎答案不再适用了：

https://forum.ionicframework.com/t/change-color-of-active-state-in-tab-icons/12547

有人知道怎么做吗？

感谢。

Answer 1

将样式添加到.tab-item-active { background:green; }类，如此

$(function() {
  var chart;
  $(document).ready(function() {
    chart = Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Packet Summary Stats'
      },
      subtitle: {
        text: 'Source: ABC'
      },
      xAxis: {
        categories: [
          'Packet Summary'
        ],
        crosshair: true
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Packet Count'
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 1
        }
      },
      series: [{
        "data": [100],
        "name": "Rx"
      }, {
        "data": [90],
        "name": "Tx"
      }, {
        "data": [10],
        "name": "Dropped"
      }, {
        "data": [10],
        "name": "No Match"
      }]
    });
  });

  $('#button').click(function() {
    chart.series[0].setData([
      [200],
      [180],
      [20],
      [20]
    ]);
  });
});

请参阅此代码：http://codepen.io/edisonpappi/pen/aWvmjz

Answer 2

对我来说，为班级设置CSS规则＆＃34; .activated＆＃34;工作

.activated {
   background-color: blue;
}

此类暂时应用于所选的标签项。

Answer 3

这可以通过以下方式完成：

Ionic有以下css：

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    opacity: 1;
}

您需要按如下方式覆盖它：

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    color: red;
}

Answer 4

您还可以在 theme / variables.scss 中使用SCSS $tabs-ios-tab-icon-color-active 变量，例如：

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$tabs-ios-tab-icon-color: #00f;
$tabs-ios-tab-icon-color-active: #f00;


// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$tabs-md-tab-icon-color: #00f;
$tabs-md-tab-icon-color-active: #f00;

这会给你这样的东西：

有关更多信息，请查看here。

希望可以提供帮助。

如何更改活性离子标签的颜色？

4 个答案: