首页 文章

角度材质自定义选项卡

提问于
浏览 次
4

我'm using angular 4 and I' m使用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 但设置时文字颜色有点紧张 . 请帮忙 .

Update:

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

/* 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;
}
angular angular-material2

3 回答

  • 16

    在组件中，将ViewEncapsulation设置为 None 并在component.css文件中添加样式 .

    Changes in Typescript code:

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

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

    Component 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

    回复于
  • 7

    如果您不想触摸ViewEncapsulation，请使用:: ng-deep代替类选择器（通过浏览器开发工具检查） .

    例如（Angular 5，Material 2）：

    /* active tab */
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:red;
background-color: green;
}

/* ink bar */
::ng-deep .mat-ink-bar {
background-color: var(--primary-color,#1F89CE) !important;
}
    回复于
  • 0

    通过覆盖材料设计，我花了很长时间才弄清楚如何更改标签的背景颜色 . 我不知道在哪里分享我的最终结果，所以在这里：

    对于.ts文件：

    @Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css'],
  encapsulation: ViewEncapsulation.None
})

    对于css文件：

    .mat-tab-labels, .mat-tab-label, .mat-tab-link {
  color: white;
  font-size: 16px;
  background-color: #804A71;
}

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: white;
  height: 5px; 
}

    因此，这既是backgroundcolor，文本的颜色和大小（标签），也是文本下的标签栏 . 当我同时使用.mat-tab-labels和.mat-tab-label时，它终于奏效了 .

    回复于

相关问题