设置底部片材的宽度在角材料2

Question

我可以设置bottomsheet的宽度在角材料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 Ahmeds出色答卷：如果要设置宽度分别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;
}