Question

我希望能够根据条件在我提供的带有内容类的stackblitz项目中的div上设置选项卡的颜色。如果selectedMarketStatus === marketStatus.Open语句为true，则我希望内容div和选项卡都为绿色。这可能吗？如果可以，我该怎么办？

编辑：更新了闪电战，它可以实现我想要的功能，＆-closes上的scss样式不适用于stackblitz，但可以在我的项目中使用。

Stackblitz

export class TabGroupThemeExample {
  public marketStatus = MarketPurchaseStatus;
  public selectedMarketStatus = this.marketStatus.Open;
  constructor() {}
}

export enum MarketPurchaseStatus {
  BeforeOpen = 0,
    Open = 1,
    AfterClose = 2
}

.content {
  background-color: gray;
}

.open {
  background-color: green;
}

<mat-tab-group class="subscription-market-tabs" [animationDuration]="0" [disableRipple]="true">
  <mat-tab>
    <ng-template mat-tab-label>aaaa</ng-template>
  </mat-tab>
  <mat-tab [disabled]="selectedMarketStatus === marketStatus.AfterClosed">
    <ng-template mat-tab-label>bbbb</ng-template>
  </mat-tab>
</mat-tab-group>
<div class="content" [class.open]="selectedMarketStatus === marketStatus.Open">aaaaaa</div>

Answer 1

使用条件样式来实现此目的。我相信这个link将为您提供帮助。

如果添加样式：

<some-element [ngStyle]="{'backgroundColor':  (selectedMarketStatus === marketStatus.Open) ? 'green' : ''}">element</some-element>

如果您有上述类，请使用以下代码：

<some-element [ngClass]="{'green': selectedMarketStatus === marketStatus.Open }">...</some-element>

请查看ngStyle和ngClass的角度文档

请查看您code的此更新版本

Answer 2

我最终为选项卡创建了一个全局样式，并使用父选择器创建了一个“打开”样式和一个“关闭”样式，然后可以有条件地在组件中的两个样式之间进行切换。

还在我的原始帖子中更新了闪电战。

tab-styles.scss:

.subscription-market-tabs {
  &-open {
    /* Removes the bottom border below the tabs */
    .mat-tab-header {
      border-bottom: none;
      /** Hack to hide the border between .mat-tab-body-wrapper and the active tab */
      transform: translateY(1px);
      z-index: 1000;
    }
    // Styling of tabs in the top banner (on the right side) of a coordinet-component
    .mat-tab-list {
      // Remove underline
      mat-ink-bar.mat-ink-bar {
        display: none;
      }
      // Tabs with rounded corners.
      .mat-tab-labels {
        color: black; // TODO: theme color
        .mat-tab-label {
          height: 72px;
          padding: 0 48px;
          border-radius: 10px 10px 0px 0px;
          background-color: #F2F8FF;
          color: black;
          border: 1px solid #D0DCEA;
          font-weight: 600;
          &.mat-tab-label-active {
            border-bottom: none;
            min-width: 160px !important;
            background-color: #D6ECEC; // TODO: theme color
            color: black; // TODO: theme color
            opacity: 1;
            font-weight: 700;
          }
        }
      }
    }
  }
  &-closed {
    /* Removes the bottom border below the tabs */
    .mat-tab-header {
      border-bottom: none;
      /** Hack to hide the border between .mat-tab-body-wrapper and the active tab */
      transform: translateY(1px);
      z-index: 1000;
    }
    // Styling of tabs in the top banner (on the right side) of a coordinet-component
    .mat-tab-list {
      // Remove underline
      mat-ink-bar.mat-ink-bar {
        display: none;
      }
      // Tabs with rounded corners.
      .mat-tab-labels {
        color: black; // TODO: theme color
        .mat-tab-label {
          height: 72px;
          padding: 0 48px;
          border-radius: 10px 10px 0px 0px;
          background-color: #F2F8FF;
          color: black;
          border: 1px solid #D0DCEA;
          font-weight: 600;
          &.mat-tab-label-active {
            border-bottom: none;
            min-width: 160px !important;
            background-color: #E7F0FA; // TODO: theme color
            color: black; // TODO: theme color
            opacity: 1;
            font-weight: 700;
          }
        }
      }
    }
  }
}

<mat-tab-group [class.subscription-market-tabs-closed]="model.selectedMarketStatus === marketStatus.AfterClose || marketStatus.BeforeOpen" 
                [class.subscription-market-tabs-open]="model.selectedMarketStatus === marketStatus.Open"
                [animationDuration]="0">
  <mat-tab [label]="'forecast-and-subscriptions-tab'|translate">
  </mat-tab>
  <mat-tab [label]="'market-and-bid-list-tab'|translate">
  </mat-tab>
</mat-tab-group>

动态设置mat-tab的背景色

2 个答案: