html - 更改 Angular Material 下拉列表和文本的默认位置

Question

我正在尝试将 Material 下拉面板的位置更改为下拉按钮的底部。并尝试将名称和箭头垂直居中到下拉区域。 请浏览我要实现的图像。

<div class="dropDown">
   <mat-select disableOptionCentering placeholder="Select any value">
     <mat-option *ngFor="let item of list" [value]="item">{{item}}</mat-option>
   </mat-select>
</div>


.dropDown{
 width:200px;
 height:40px;
 background-color: white;
 text-align: center;
 border: 1px solid grey;
 vertical-align: middle;
 }

Answer 1

对于显示在选择框下方的下拉菜单，将以下 css 添加到 panelClass 中:

.myPanelClass{
    margin: 25px 0px;
}

然后为了使文本居中，请在 class 中引用以下 css:

.mySelectClass {
  padding-top: 12px;
}

然后将它们添加到 html 中

<div class="dropDown">
   <mat-select disableOptionCentering 
               placeholder="Select any value"
               panelClass="myPanelClass"
               class="mySelectClass">
     <mat-option *ngFor="let item of list" [value]="item">{{item}}</mat-option>
   </mat-select>
</div>

这是一个有效的 stackblitz