如何自定义mat-select下拉位置？

2 回答

• 7

  <mat-select placeholder="Language" disableOptionCentering panelClass="myPanelClass">
                      <mat-option *ngFor="let locale of locales" [value]="locale">
                          {{locale}}
                      </mat-option>
                  </mat-select>
  

  像上面一样使用 disableOptionCentering 和 panelClass . 然后在您的 styles.scss 引用你的panelClass并做

  .myPanelClass{
          margin-top: 30px !important; 
      }
  

  这对我有用 . 注意scss must be in your styles.scss not your component's scss file . 你可能不需要在这里使用重要的，我有其他类围绕这个，所以我确实使用它 .

  回复于 2024-05-05T17:00:10+08:00
• 1

  我发现解决方案为 disableOptionCentering direcrive为 mat-select ，因此使用此dropdaown后可以自定义 .

  来自timmoy：https://github.com/angular/material2/pull/9885

  用法示例：

  <mat-select
      [(ngModel)]="currentPokemon"
      [required]="pokemonRequired" 
      [disabled]="pokemonDisabled" 
      #pokemonControl="ngModel" 
      disableOptionCentering>
  <mat-option 
      *ngFor="let creature of pokemon" 
      [value]="creature.value">
  {{ creature.viewValue }}
  </mat-option>
  </mat-select>
  

  回复于 2024-05-05T17:00:10+08:00