Angular 5.2材质组件如何去除多余的空间

我已经 Build 了我的第一个角度应用程序,但到目前为止没有运气可以更好地控制某些材料组件使用的空间 .

::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-form-field,带有输入字段和自动完成 . 到目前为止还无法改变场地的整体高度 .
<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-accordionmat-expansion-panel-header ,当它处于扩展模式时,也太高了:
::ng-deep .mat-expansion-panel-header  {
     padding: 0px 10px 0px 10px;
     height:32px !important;
}

非常感谢! (请告诉我是否有更好的方法来压缩所有材料组件的空间 . )

回答(0)