-1

我正在使用 Angular 7。对于选项卡，我使用了 Tabset。我想为每个选项卡使用不同的颜色作为背景和悬停效果。

这是代码：

 <div class="card-body md-tabs">
<ngb-tabset (tabChange)="fun($event.nextId)">
  <ngb-tab id="BasicInfo" style="color: #004d40 !important;">
    <ng-template ngbTabTitle class="tab-title tab">
      <span style="color: #004d40;font-size: 16px;font-weight: bold;"><i
          class="icofont icofont-home"></i>&nbsp;&nbsp;Basic Information</span>
    </ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab style="background-color: red" id="Supplier">
    <ng-template ngbTabTitle><span style="color: #e65100;font-size: 16px;font-weight: bold;"><i
          class="fa fa-money"></i>&nbsp;&nbsp;Supplier</span></ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab style="background-color: red" id="Tax">
    <ng-template ngbTabTitle><span style="color: #e65100;font-size: 16px;font-weight: bold;"><i
          class="fa fa-money"></i>&nbsp;&nbsp;Tax</span></ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab id="Terms">
    <ng-template ngbTabTitle>
      <span style="color: #1a237e;font-size: 16px;font-weight: bold;"><i
          class="fa fa-book"></i>&nbsp;&nbsp;Terms</span>
    </ng-template>

    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab id="Misc">
    <ng-template ngbTabTitle>
      <span style="color: #bf360c;font-size: 16px;font-weight: bold;"><i
          class="fa fa-file-text"></i>&nbsp;&nbsp;Miscellaneous</span>
    </ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab id="Graph">
    <ng-template ngbTabTitle>
      <span style="color: #01579b;font-size: 16px;font-weight: bold;">
        <i class="fa fa-bar-chart"></i>&nbsp;&nbsp;Graph View
      </span>
    </ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>
</div>

在此处输入图像描述

有什么办法吗？任何人都可以为此提供帮助吗？

4

3 回答 3

2 
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label:first-child  {
  color:red;
  background-color: green;
}

::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label:first-child:hover  {
  color:green;
  background-color: red;
}

StackBlitz：https ://stackblitz.com/edit/angular-jggy2s

于 2019-09-14T05:59:05.100 回答
1

鼠标进入，鼠标离开。这是一个简单而基本的示例： https ://stackblitz.com/edit/angular-obcut6

于 2019-09-14T08:52:13.043 回答
0

您能否更具体地说明您想要实现的目标？

听起来像是一个封装问题，尝试将您的样式移动到全局 styles.scss 文件或添加encapsulation: ViewEncapsulation.None到主机组件的元数据（模板中包含选项卡的组件）

于 2019-09-17T12:07:45.197 回答