Я построил свое первое угловое приложение, но пока не повезло, чтобы лучше контролировать пространство, используемое некоторыми компонентами материала.
mat-tab-label
, что слишком широко, я следовал этому: Угловой 2 материала, размер md-tab
и иметь CSS:
::ng-deep .mat-tab-label, ng-deep .mat-tab-label-active{
min-width: 60px!important;
padding: 0px 15px 0px 15px !important;
margin: 0px 3px 0px 3px !important;
font-size:12px;
}
Я могу лучше контролировать ширину, но она все еще слишком высокая. Можно ли изменить высоту вкладки-надписи?
Поле mat mat, с полем ввода и автозаполнением. Пока не удалось изменить общую высоту поля.
<div class="mysymbolform">
<mat-form-field class="symbolbox">
<input class="inputbox" matInput placeholder="enter"
value="Enter" [(ngModel)]="value"
#box autofocus (keyup.enter)="onEnter(box.value)"
[matAutocomplete]="auto" [formControl]="formCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let result of filteredResult | async"
[value]="result.title" >
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
высота которого как минимум вдвое больше обычного поля ввода HTML.
mat-accordion
, mat-expansion-panel-header
, когда он находится в режиме расширения, тоже слишком высокий:
::ng-deep .mat-expansion-panel-header {
padding: 0px 10px 0px 10px;
height:32px !important;
}
Большое спасибо! (И, пожалуйста, скажите мне, если есть лучшие способы сжать пространство всех компонентов материала.)