Question

我可以在Angular Material 2中设置底片的宽度（固定或百分比）吗？

非常感谢

Answer 1

使用panelClass配置参数。例如：

在styles.css中：（全局样式文件而不是component.css文件）

.custom-width {
    width: 450px;
}

In your component.ts：

this.bottomSheet.open(BottomSheetOverviewExampleSheet, {
  panelClass: 'custom-width'
});

https://stackblitz.com/angular/qvokqxjgbrn

注意：仅像素宽度有效。

Answer 2

除了Tabrez Ahmed的出色答案：如果要将宽度分别设置为100% 100vw，则需要在 styles.css中添加以下内容避免左右空格：

.custom-width {
  width: 100vw;
}

.mat-bottom-sheet-container-large, .mat-bottom-sheet-container-medium, .mat-bottom-sheet-container-xlarge {
  /* unset maximum width */
  max-width: unset !important;
}

.mat-bottom-sheet-container-large, .mat-bottom-sheet-container-medium, .mat-bottom-sheet-container-xlarge {
  /* remove border radius */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

Answer 3

通过 MAT_BOTTOM_SHEET_DEFAULT_OPTIONS 为每个底部工作表添加一个类是可行的。这样，它就不必为底部工作表的每个实例添加 calss。此解决方案适用于 Angular 8。

添加到 app.modules：


import {MAT_BOTTOM_SHEET_DEFAULT_OPTIONS} from '@angular/material/bottom-sheet';

providers: {
  ...
  { provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, useValue: {panelClass: 'bottom-sheet'} }
}

这样 .bottom-sheet 类将被添加到所有 mat-bottom-sheet-container 中。您必须在 css 中为类添加宽度。

查看文档中的更多选项： https://material.angular.io/components/bottom-sheet/overview

在Angular Material 2中设置底部的宽度

3 个答案: