角度材料自定义选项卡 [英] Angular Material customize tab

问题描述

我正在使用角度4，并且正在使用角度材料.

I'm using angular 4 and I'm using Angular Material.

<md-tab-group [disableRipple]=true>
    <md-tab label="Tab 1"></md-tab>
    <md-tab label="Tab 2"></md-tab>
</md-tab-group>

当(未选择/选择)，文本颜色等时，如何完全自定义背景颜色.我已经尝试过使用伪类...但仍然无济于事. ---我已经成功设置了font-size，但是设置时文本颜色有些抖动.请帮忙.

How can I fully customize the background color when (not-selected / selected), text color, and etc. I've already tried using pseudo classes...but still no avail. --- I have set the font-size successfully but the text color is a little bit jittery when set. Please help.

更新:

我试图在选择背景时将背景更改为透明...试图在选项卡等中未选择链接时覆盖颜色..但是仍然无法正常工作.

I've tried to change the background to transparent when selected...trying to override the color when the link is not selected in the tab and etc..but still doesn't work.

/* Styles go here */

  .mat-tab-label{
    color:white;
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
  }

  /deep/ .mat-tab-label{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}

.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{
      background-color:transparent;
      color:white;
      font-weight: 700;
  }

.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{
    background-color:transparent;
    color:white;
    font-weight: 700;
}



.mat-tab-label:active{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}

.mat-tab-label:selected{
    min-width: 25px !important;
    padding: 5px;
       background-color:transparent;
        color:white;
        font-weight: 700;
}

推荐答案

在您的组件中，设置 ViewEncapsulation 到None，然后在您的component.css文件中添加样式.

In your component, set ViewEncapsulation to None and add the styles in your component.css file.

打字稿代码的更改:

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

组件CSS:

/* Styles for tab labels */
.mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the ink bar */
.mat-ink-bar {
    background-color: green;
}

演示

这篇关于角度材料自定义选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！