分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了角度材质自定义选项卡，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在使用角度4而我正在使用 Angular Material.

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

如何(未选择/选择),文本颜色等我可以完全自定义背景颜色.我已经尝试过使用伪类……但仍无济于事. —我已经成功设置了字体大小,但设置时文本颜色有点紧张.请帮忙.

更新：

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

/* 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文件中添加样式.

Typescript代码的变化：

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

Demo