角度材料自定義選項卡

Question

我正在使用 angular 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>

如何在（未選擇/選擇）、文本顏色等時完全自定義背景顏色。我已經嘗試使用偽類……但仍然無濟於事。 --- 我已經成功設置了font-size但是設置時文本顏色有點緊張。 請幫忙。

更新：

我試圖在選擇時將背景更改為透明...試圖在選項卡中未選擇鏈接時覆蓋顏色等...但仍然不起作用。

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

Answer 1

在您的組件中，將ViewEncapsulation設置為None並在您的 component.css 文件中添加樣式。

打字稿代碼的變化：

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

演示

Answer 2

更新

要自定義標簽背景和墨水欄，您可以定義自己的主題，然后使用標簽組上的主題選項：

<div class="my-theme">
    <mat-tab-group [backgroundColor]="'primary'" [color]="'warn'">
        <mat-tab label="First"> Content 1 </mat-tab>
        <mat-tab label="Second"> Content 2 </mat-tab>
        <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
</div>

這是一個關於StackBlitz的例子。

::ng-deep 的舊答案

如果您不想觸摸 ViewEncapsulation，請使用 ::ng-deep 代替類選擇器（由瀏覽器開發工具檢查）。

例如（角度 5，材質 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;
}

Answer 3

最新解決方案：-

1）覆蓋styles.css 2）使用該材質選項卡所在位置的組件選擇器

樣式文件

  app-child .mat-tab-label.mat-tab-label-active {
    padding: 0px 15px ;
  justify-content: flex-start;
  }

  app-child .mat-tab-label{
    padding: 0px 15px ;
  justify-content: flex-start;
  }

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
    background:#6168e7;
  }

Answer 4

角度版本 6

自定義選項卡的新設計

html

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

scss

/deep/ .mat-tab-labels {
  min-width: auto !important;
  div {
    border: 1px solid #fff;
    background-color: #404040;
      &.mat-tab-label-active {
        background-color: #3aafa9;
        .mat-tab-label-content {
          border: none;
          background-color: #3aafa9;
          }
      }
      .mat-tab-label-content {
        border: none;
        color: #fff !important;
        }
    }
 }

 /deep/ .mat-tab-group{
  &.mat-primary {
    .mat-ink-bar {
      background-color: transparent;
    }
  }
 }

 /deep/ .mat-tab-body-wrapper{
   min-height: 550px
 }

 /deep/ .mat-tab-label-container {
   flex-grow: 0 !important;
 }

/deep/ .mat-tab-label{
  opacity: 1 !important;
 }

Answer 5

我花了很長時間才弄清楚如何通過覆蓋材料設計來更改選項卡的背景顏色。 我不知道在哪里分享我的最終結果，所以這里是：

對於 .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; 
}

所以這既是背景色，文本（標簽）的顏色和大小，也是文本下的標簽欄。 當我同時使用 .mat-tab-labels 和 .mat-tab-label 時，它終於奏效了。

Answer 6

您還可以使用 ::ng-deep 偽元素設置默認材質類的樣式。

:host ::ng-deep .mat-tab-label {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }

:host 是可選的，它將樣式范圍限定為當前組件中的選項卡。