[英]How to adjust the width of the toastr message in Angular
I have toastr message notification using ngx-toastr from npm (my current stack is Angular 9)我有使用来自 npm 的 ngx-toastr 的 toastr 消息通知(我当前的堆栈是 Angular 9)
Is there a way to alter the max-width for the messages since it is causing the message-text to wrap.有没有办法改变消息的最大宽度,因为它会导致消息文本换行。
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true }
).
I want the displayed also to be in the first line我也希望显示在第一行
You could use the native classes, iE toast-top-full-width
or toast-bottom-full-width
您可以使用本机类,即toast-top-full-width
或toast-bottom-full-width
<toaster-container toaster-options="{
'time-out': 2500,
'close-button':false,
'position-class':'toast-bottom-full-width'
}"></toaster-container>
As an alternative you could also apply your custom class via position-class
and define the class in your CSS.作为替代方案,您还可以通过position-class
应用自定义 class 并在 CSS 中定义 class。
<toaster-container toaster-options="{
'time-out': 2500,
'close-button':false,
'position-class':'my-own-toastr-class'
}"></toaster-container>
CSS: CSS:
.my-own-toastr-class {
width: 100%;
}
Update after clarifications from the comments:评论澄清后更新:
From the docs:从文档:
Setting Individual Options设置个别选项
success
,error
,info
,warning
take (message, title, ToastConfig) pass an options object to replace any default option.success
,error
,info
,warning
take (message, title, ToastConfig) 传递一个选项 object 来替换任何默认选项。
Example:例子:
this.toastrService.error('everything is broken', 'Major Error', {
timeOut: 3000,
});
So in your case for example that would be:因此,在您的情况下,例如:
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true,
position-class:'toast-bottom-full-width'
}
).
Or with your own custom class:或者使用您自己的自定义 class:
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true,
position-class:'my-own-toastr-class'
}
).
Please see more info under OPTIONS at https://www.npmjs.com/package/ngx-toastr .请在https://www.npmjs.com/package/ngx-toastr的选项下查看更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.