Angular 材质自定义选项卡

Posted 2023-02-18

【中文标题】Angular 材质自定义选项卡

【英文标题】：Angular Material customize tab

【发布时间】：2018-02-07 00:28:49

【问题描述】：

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

【问题讨论】：

用你迄今为止尝试过的东西创建一个 plunker。这是一个链接：plnkr.co/edit/?p=preview

如果颜色未按预期显示，您可能还需要更改默认的.mat-tab-label opacity: 0.6 。

【参考方案1】：

在您的组件中，将 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

【讨论】：

在.mat-tab-label 类中将background-color 设置为您想要的颜色。看到这个更新的 plunker：plnkr.co/edit/Vq5LYJIdY8IFfRMVi7Fv?p=preview

要更新墨条试试这个：.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar height:4px;

看你的demo，点击时如何防止标签移动？

避免填充。会的。 @JFGagnon

这里的问题是，当我们使用 ViewEncapsulation.None 时，这个组件中的所有 css 都会溢出到其他组件。如果我在下一个组件中有一个 mat-tab-label 我不想在两者上共享相同的 css 怎么办？你可能会在另一个组件上说 viewencapsualtion.none ，但是那个组件也会将它的 css 泄露给其他组件......

【参考方案2】：

更新

要自定义选项卡背景和墨条，您可以定义自己的theme，然后使用tab group 上的主题选项：

<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 代替类选择器（通过浏览器开发工具检查）。

例如（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;

【讨论】：

::ng-deep 将被弃用。 ViewEncapsulation 是要走的路。

【参考方案3】：

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

对于 .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 时，它终于奏效了。

【参考方案4】：

最新解决方案：-

1) 在styles.css 中覆盖 2）使用该材料选项卡所在组件的选择器

styles.css

  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;
  

【讨论】：

这应该是一个更好的解决方案，因为它会避免使用ViewEncapsulation.None。通过不使用ViewEncapsulation.None，所有组件特定的 css 都将保持紧缩状态，并且只有我们无法针对角度材质库的 css 将从全局 CSS 文件中定位，这仍然是一个干净的解决方案，因为组件选择器在此全局 css 文件中使用，因此以后不会出现混淆或可维护性问题。

@HDJEMAI 是对的。这是一个更好的解决方案。使用 ViewEncapsulation.None，它会在应用程序的其他部分产生问题。而且这个解决方案工作得很好。

【参考方案5】：

Angular 版本 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

::ng-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;
        
    
 

 ::ng-deep .mat-tab-group
  &.mat-primary 
    .mat-ink-bar 
      background-color: transparent;
    
  
 

 ::ng-deep .mat-tab-body-wrapper
   min-height: 550px
 

 ::ng-deep .mat-tab-label-container 
   flex-grow: 0 !important;
 

::ng-deep .mat-tab-label
  opacity: 1 !important;
 

【讨论】：

这仍然有效，但您需要将 /deep/ 替换为 :ng-deep

【参考方案6】：

您还可以使用 ::ng-deep 伪元素设置默认材质类的样式。

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

:host 是可选的，它将样式范围限定为当前组件中的选项卡。