blocks|key|2599045|text|您可以确定由docs指定的verticalPosition:+MatSnackBarVerticalPosition|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2599046|ts：|2599047|openSnackBar(message:+string,+action:+string)+{
++++this.snackBar.open(message,+action,+{
++++++duration:+2000,
++++++//+here+specify+the+position
++++++verticalPosition:+'top'
++++});
}|code-block|syntax|javascript|2599048|Demo|2599049|entityMap|0|LINK|mutability|MUTABLE|url|https://material.angular.io/components/snack-bar/api#MatSnackBarConfig|1|https://stackblitz.com/edit/angular-yer8ju^0|D|19|6|4|0|0|0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

You can determine the <code>verticalPosition: MatSnackBarVerticalPosition</code> as specified by the <a href="https://material.angular.io/components/snack-bar/api#MatSnackBarConfig" rel="noreferrer">docs</a>

ts:

<pre><code>openSnackBar(message: string, action: string) {
 this.snackBar.open(message, action, {
 duration: 2000,
 // here specify the position
 verticalPosition: 'top'
 });
}
</code></pre>

<a href="https://stackblitz.com/edit/angular-yer8ju" rel="noreferrer">Demo</a>

blocks|key|2599141|text|要定位快捷栏，请使用位置值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2599142|++++++++++++this.snackBar.open(message.text,+action,+{
++++++++++++++++duration:+this.timeOut,
++++++++++++++++verticalPosition:+'bottom',+//+'top'+%7C+'bottom'
++++++++++++++++horizontalPosition:+'end',+//'start'+%7C+'center'+%7C+'end'+%7C+'left'+%7C+'right'
++++++++++++++++panelClass:+['red-snackbar'],
++++++++++++});|code-block|syntax|javascript|2599143|要更改颜色，请在style.css中定义红色快照栏：|2599144|+.red-snackbar{
++background-color:+rgb(153,+50,+50);
++color:lightgoldenrodyellow;
}|2599145|https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence|offset|length|2599146|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|2L|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

To position the snackbar use position values 

<pre><code> this.snackBar.open(message.text, action, {
 duration: this.timeOut,
 verticalPosition: 'bottom', // 'top' | 'bottom'
 horizontalPosition: 'end', //'start' | 'center' | 'end' | 'left' | 'right'
 panelClass: ['red-snackbar'],
 });
</code></pre>

and to change color, in your style.css define the red-snackbar:

<pre><code> .red-snackbar{
 background-color: rgb(153, 50, 50);
 color:lightgoldenrodyellow;
}
</code></pre>

<a href="https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence" rel="noreferrer">https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence</a>

blocks|key|2599203|text|这应该是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2599204|.mat-snack-bar-container+{
+margin-top:+50px+!important;
}|code-block|syntax|javascript|2599205|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This should work:

<pre><code>.mat-snack-bar-container {
 margin-top: 50px !important;
}
</code></pre>

blocks|key|2599361|text|对于任何想知道如何动态设置snackbar位置的人，这里有一个示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2599362|showSnackBar(text:+string,+duration+=+2000,+actionText+=+'Fechar',+horizontalPosition+=+'center'):+MatSnackBarRef<SimpleSnackBar>+{
++++return+this.snackBar.open(text,+actionText,+{
++++++duration:+duration,
++++++//+Cast+the+variable+to+MatSnackBarHorizontalPosition
++++++horizontalPosition:+horizontalPosition+as+MatSnackBarHorizontalPosition
++++});
++}|code-block|syntax|javascript|2599363|并从以下位置导入MatSnackBarHorizontalPosition：|2599364|import+{+MatSnackBarHorizontalPosition+}+from+"@angular/material/snack-bar";|2599365|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For anyone wondering how to dynamically set the snackbar position, here is an example:
<pre><code>showSnackBar(text: string, duration = 2000, actionText = 'Fechar', horizontalPosition = 'center'): MatSnackBarRef&lt;SimpleSnackBar&gt; {
 return this.snackBar.open(text, actionText, {
 duration: duration,
 // Cast the variable to MatSnackBarHorizontalPosition
 horizontalPosition: horizontalPosition as MatSnackBarHorizontalPosition
 });
 }
</code></pre>
And import MatSnackBarHorizontalPosition from:
<pre><code>import { MatSnackBarHorizontalPosition } from &quot;@angular/material/snack-bar&quot;;
</code></pre>

blocks|key|2599395|text|这已被弃用，但在Angular:+12.0.0-rc.3中运行良好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2599396|::ng-deep+.mat-snack-bar-container+{
++++margin-top:+250px+!important;
}|code-block|syntax|javascript|2599397|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

this is deprecated, but worked fine in Angular: 12.0.0-rc.3.
<pre><code>::ng-deep .mat-snack-bar-container {
 margin-top: 250px !important;
}
</code></pre>

I am trying to position the <code>MatSnackbar</code> module to appear at the top of my page.

I have tried using the <code>config</code> to add <code>customclass</code>. Here is my code:

component.ts

<pre><code>let config = new MatSnackBarConfig();
config.duration = 50000;
config.panelClass = ['red-snackbar']
this.snackBar.open("Please fill all the details before proceeding.", null, config);
</code></pre>

.css

<pre><code>.red-snackbar{
 position: absolute !important;
 top: 54px;
}
</code></pre>

But it is not working. Is it possible to re-position the MatSnackbar?

How can I position Position MatSnackBar module in Angular?

我正在尝试定位MatSnackbar模块，使其显示在页面顶部。我已经尝试使用config添加customclass。下面是我的代码：component.tslet config = new MatSnackBarConfig();config.duration = 50000;config.panelClass = [...

问如何在Angular中定位MatSnackBar模块？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular中定位MatSnackBar模块？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular中定位MatSnackBar模块？
EN