Как использовать CSS для стилизации вкладок Angular Material? - PullRequest
Новая
       2

Как использовать CSS для стилизации вкладок Angular Material?

2 голосов
/ 24 октября 2019

Я очень новичок в Angular. Я недавно добавил вкладку Angular Material в свой проект приложения, аналогичный приведенному ниже. 

<mat-tab-group>
  <mat-tab label="First"  class="firstTab"> Content 1 </mat-tab>
  <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
  <mat-tab label="Third"  class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

В моем приложении мне иногда нужно привлечь внимание пользователя к определенным вкладкам. Подход, о котором я думал, заключается в том, чтобы выделить вкладку интереса, придав ей следующие качества: 

.highLightTab{
   border-width: 9px;
   border-style: solid;
   border-color: orange;
}

enter image description here

Традиционный способ достижениявсе вышеперечисленное будет выполнено через 

$(".secondTab").addClass("highLightTab");

Однако этого достичь невозможно, поскольку я не могу настроить классы CSS / стили CSS для любого из элементов Mat-X, сгенерированных во время выполнения.

Может ли кто-нибудь любезно сказать мне, как этого добиться?

Ответы [ 2 ]

2 голосов
/ 24 октября 2019

Я не рекомендую использовать ng-deep, поскольку он устарел:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Вместо этого следует оформить его в виде угловых материалов:

https://material.angular.io/guide/theming

Поскольку у вас, вероятно, будет много пользовательских стилей для ваших компонентов материала, это лучший подход, и вы можете централизовать все пользовательские стили материала в одном файле scss, если хотите.

Пример реализации (не проверено, но должно работать):

my-custom-elements.scss 

@import '~@angular/material/theming';

@mixin custom-tabs-theme() {
  .mat-tab-label-active  {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }
}

global-material-theme.scss 

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import './material/my-custom-elements.scss';

@include custom-tabs-theme();

angular.json 

...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...

Примечание. Таким способом вы можете редактировать любой класс css материала.

1 голос
/ 24 октября 2019

Чтобы добавить пользовательский класс на ваши вкладки материалов, вы должны использовать синтаксис ng-template: 

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>
            <span class="my-custom-class">Security</span>
        </ng-template>
        Content 1
    </mat-tab>
    <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
    <mat-tab class="my-custom-class" label="Third" class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

. При этом вы можете оформить свой my-custom-class, как обычно: 

.my-custom-class {
  border-width: 9px;
  border-style: solid;
  border-color: red;
}

Вы также можете стилизовать классы материалов по умолчанию, используя псевдоэлемент ::ng-deep. 

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

Необязательный :host, который ограничивает стили для вкладок в текущем компоненте.

Прилагается демонстрационная версия stackblitz .

...