Динамически стилизовать свойство mat-tab из компонента Angular 6 - PullRequest
Новая
       74

Динамически стилизовать свойство mat-tab из компонента Angular 6

0 голосов
/ 17 октября 2018

У меня есть mat-tab-group с двумя вкладками - Базовый поиск и Расширенный поиск.Поскольку в расширенном поиске гораздо больше полей формы, я бы хотел динамически изменить свойство max-height класса .mat-tab-body-content. 

<mat-tab-group (selectedTabChange)="tabChanged($event)">
	<mat-tab label="Basic">
		<ng-template matTabContent>
			

		<!-- .. -->

		</ng-template>
	</mat-tab>
	<mat-tab label="Advanced">
		<div>
			<ng-template matTabContent #advSearchTab>
				<form [formGroup]="searchForm" (ngSubmit)="search()"  >
				
					<!-- ... -->
					
				</form>
			</ng-template>
		</div>
	</mat-tab>
</mat-tab-group>

И когда он рендерится в DOM, Angular вводит этот класс контента: 

  <div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform: none;">

У меня есть некоторые scss, которые я хотел бы динамически изменить вкод моего компонента ts.

Вот настройки scss, которые у меня есть в настоящее время для значений max-height и overflow-y: 

$advanced-search-panel-max-height: 800px;
$advanced-search-panel-overflow-y: auto;

:host ::ng-deep .mat-tab-body-content{  
  max-height: $advanced-search-panel-max-height;
  padding:5px;
  overflow-y: $advanced-search-panel-overflow-y;
}

На ноутбуке эта max-height с auto не показывает полосу прокрутки (то есть вы обычно видите кнопку Submit / Clear внизу), что вызываетсодержание должно быть скрыто внизу.По этой причине я хотел бы динамически изменить эти два стиля.

enter image description here Могу ли я как-то назначить эти scss-переменные в моем компонентном коде, или мне нужно использовать ElementRef тип?

1 Ответ

0 голосов
/ 22 октября 2018

По умолчанию класс mat-tab-body-content уже имеет переполнение, установленное на auto, поэтому устанавливать его не нужно.При обычном использовании, если вы хотите, чтобы вертикальная полоса прокрутки появлялась внутри вкладки, вам просто нужно ограничить высоту mat-tab-group.

...