我正在开发 Angular 应用程序,到目前为止我一直在使用 Angular Material 组件。 当我开始设计应用程序时,我很快就遇到了设计 Angular Material 组件的问题。 我需要使由 mat-select 和 mat-options 制作的下拉菜单变大。
我知道使用::ng-deep 的解决方案,但我找不到组件的单个部分来调整整个组件的大小。我也很高兴听到::ng-deep 的替代方案,如果有人知道的话。
<mat-form-field>
<mat-select [(value)]="initialValue" [placeholder]="placeholder">
<mat-option class="mat-option" *ngFor="let option of content"
[value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
这是 Angular Material 下拉列表的最小工作实现: https://stackblitz.com/edit/angular-cuu4pk
当我使用::ng-deep 改变组件的大小时,只有 objective-c ss 类被调整大小,而不是整个组件。
编辑: 感谢您到目前为止的回答! 可以使用::ng-deep 更改组件的宽度,但即使我更改高度,一般尺寸也会相同。 我要找的是类似于 css 的 transform: scale() 的东西。 transform scale() 无法完成工作的原因是组件的变形。
最佳答案
您在“mat-form-field”上添加内联样式或 css 类
<mat-form-field style="width: 400px"> // <---- Add here your style
<mat-select [(value)]="initialValue" [placeholder]="placeholder" >
<mat-option class="mat-option" *ngFor="let option of content"
[value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
第二个选项在您的 css 中添加此代码:
mat-form-field{
width: 400px;
}
关于css - 如何调整 Angular Material 组件的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57883049/