我想在标题的下面放置小吃栏(高度为60像素)。
问题是verticalPosition将小吃栏放置在顶部并覆盖标题。 我曾尝试添加“ margin-top:75像素”,但以上区域不可点击。 (有一个覆盖物)
因为我还有其他对话框,所以我无法更改cdk-overlay-pan的样式。
答案 0 :(得分:3)
您可以尝试以下方法:
css
类以修改Snackbar
组件的样式。panelClass
属性。在全局styles.scss
中添加此样式声明:
.my-custom-snackbar {
margin: 0 !important;
position: absolute;
right: 25px;
top: 60px;
}
然后在打开SnackBar
时:
this.snackbar.open('Hello the world!', '', {
panelClass: 'my-custom-snackbar'
});
答案 1 :(得分:0)
从api文档(https://material.angular.io/components/snack-bar/api):
MatSnackBar的“打开”方法的参数:
message (string) - The message to show in the snackbar.
action (string) - The label for the snackbar action.
config? (MatSnackBarConfig<any>) - Additional configuration options for the snackbar.
MatSnackBarConfig具有以下属性:
horizontalPosition: MatSnackBarHorizontalPosition - The horizontal position to place the snack bar.
verticalPosition: MatSnackBarVerticalPosition - The vertical position to place the snack bar.
要查看实际情况,您可以轻松创建一个组件,注入MatSnackBar和 编写一个开放方法来传递您的配置。
这是我的Snackbar组件外观的一个小例子:
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-mat-snackbar',
templateUrl: './mat-snackbar.component.html',
styleUrls: ['./mat-snackbar.component.scss']
})
export class MatSnackbarComponent {
constructor(public snackBar: MatSnackBar) {}
openSnackBar(message: string, action: string, className: string) {
this.snackBar.open(message, action, {
duration: 9000,
verticalPosition: 'top',
horizontalPosition: 'center',
panelClass: [className],
});
}
}
我从我的HTTP拦截器中这样称呼它:
constructor(private SnackbarComponent: MatSnackbarComponent) {}
...
...
// Something wrong happened
this.SnackbarComponent.openSnackBar(errorMessage, 'Close', 'error-snackbar');
在我的Style.css文件中,我为该快餐栏添加了一个CSS类,这也是openSnackBar方法的最后一个参数。
这只是一种解决方法,因为我的mat-snackbar.component.css中的某些CSS无法正常工作。我在MatSnackBar panelClass doesnt read styling class处找到了::ng-deep
的其他解决方案。
您必须谨慎使用它,因为如果在styles.css中使用样式,则没有ViewEncapsulation。但是对我来说,这样做比较干净。
我的styles.css如下:
.error-snackbar {
position: absolute;
top: 60px;
}