Динамически установить цвет фона mat-tab - PullRequest
Новая
       47

Динамически установить цвет фона mat-tab

0 голосов
/ 15 октября 2019

Я хочу иметь возможность установить цвет вкладки в соответствии с условием, как я делаю на div в предоставленном проекте stackblitz с классом содержимого. Если утверждение selectedMarketStatus === marketStatus.Open истинно, я хочу, чтобы содержимое div и вкладка были зелеными. Это возможно? Если да, то как мне это сделать?

Редактировать: обновлен блиц, который делает то, что я хотел, стиль scss в & -closed не работает на 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>

Ответы [ 2 ]

0 голосов
/ 16 октября 2019

Я закончил тем, что создал глобальный стиль для вкладок и использовал родительские селекторы, чтобы создать один стиль, который был "Открыт", и тот, который был "Закрыт", тогда я мог условно переключаться между двумя в компоненте.

Также обновил блиц в моем исходном посте.

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>
0 голосов
/ 15 октября 2019

Используйте условный стиль для достижения этой цели. Я верю, что ссылка поможет вам.

Если вы добавите стиль: 

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

Если у вас есть класс, как указано выше, используйте следующий код: 

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

Пожалуйста, посмотрите угловую документацию для ngStyle и ngClass

Пожалуйста, посмотрите на эту обновленную версию вашего кода

...