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

Question

我可以将 bottomsheet 的宽度设置为 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

可以通过MAT_BOTTOM_SHEET_DEFAULT_OPTIONS为每个底部sheet添加一个calss。这样，它就不必为底部 sheet 的每个实例添加 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 class 将添加到所有 mat-bottom-sheet-容器中。您必须在 css.

中添加 class 的宽度

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

Answer 3

对于像我一样想要全宽底部 sheet 的人，您可以使用 @Tabrez Ahmed 答案并改用 100vw。

styles.css / styles.scss

.full-width {
  min-width: 100vw !important;
}

component.ts

openBottomSheet(): void {
  this._bottomSheet.open(
    ContactBottomSheet,
    {
      panelClass: 'full-width'
    });
}

Answer 4

Angular Material 在加载时自动添加 "mat-bottom-sheet-container" class。

您可以通过以下方式更改底部宽度 sheet

定义要在 styles.css 中更改的最小和最大宽度：（全局样式文件而不是 component.css 文件）

.mat-bottom-sheet-container {
  min-width: 384px;
  max-width: calc(100vw - 128px)
}

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

Set the width of bottom sheet in Angular Material 2

angular-material2

angular