如何调整 Angular 中 toastr 消息的宽度
How to adjust the width of the toastr message in Angular
我使用来自 npm 的 ngx-toastr 有 toastr 消息通知(我当前的堆栈是 Angular 9)
有没有办法改变消息的最大宽度,因为它会导致消息文本换行。
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true }
).
我希望显示也显示在第一行
您可以使用本机 classes,即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>
作为替代方案,您还可以通过 position-class
应用自定义 class 并在 CSS.
中定义 class
<toaster-container toaster-options="{
'time-out': 2500,
'close-button':false,
'position-class':'my-own-toastr-class'
}"></toaster-container>
CSS:
.my-own-toastr-class {
width: 100%;
}
更新 在评论澄清后:
来自文档:
Setting Individual Options
success
, error
, info
, warning
take (message, title, ToastConfig) pass an options object to replace any default option.
示例:
this.toastrService.error('everything is broken', 'Major Error', {
timeOut: 3000,
});
所以在你的情况下,例如:
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true,
position-class:'toast-bottom-full-width'
}
).
或自定义 class:
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true,
position-class:'my-own-toastr-class'
}
).
请在 https://www.npmjs.com/package/ngx-toastr 的选项下查看更多信息。
我使用来自 npm 的 ngx-toastr 有 toastr 消息通知(我当前的堆栈是 Angular 9)
有没有办法改变消息的最大宽度,因为它会导致消息文本换行。
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true }
).
我希望显示也显示在第一行
您可以使用本机 classes,即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>
作为替代方案,您还可以通过 position-class
应用自定义 class 并在 CSS.
<toaster-container toaster-options="{
'time-out': 2500,
'close-button':false,
'position-class':'my-own-toastr-class'
}"></toaster-container>
CSS:
.my-own-toastr-class {
width: 100%;
}
更新 在评论澄清后:
来自文档:
Setting Individual Options
success
,error
,info
,warning
take (message, title, ToastConfig) pass an options object to replace any default option.
示例:
this.toastrService.error('everything is broken', 'Major Error', {
timeOut: 3000,
});
所以在你的情况下,例如:
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true,
position-class:'toast-bottom-full-width'
}
).
或自定义 class:
this.toastrService.error(
'This is an error message to be displayed<br> please log back','',
{ enableHtml: true,
position-class:'my-own-toastr-class'
}
).
请在 https://www.npmjs.com/package/ngx-toastr 的选项下查看更多信息。