时间戳

首页 > 解决方案 > 在 ng-bootstrap 中更改 toast 的位置

angular8 - 在 ng-bootstrap 中更改 toast 的位置

问题描述

按照此处的示例：https ://stackblitz.com/run?file= app/toast-global.component.ts，我们在 Angular 8 中实现了一个全局 toast 服务。默认情况下，这似乎从右上角出现屏幕的一角，但是我们想将位置更改为左下角。使用 ":host" 为 ngb-toasts 创建自定义 CSS 类不会覆盖默认的 "ngb-toasts" 类。

自定义 CSS：

:host .ngb-toasts {
    left: 0 !important;
    bottom: 0 !important;
}

对此的任何指示都将非常感激！

标签： angular8ng-bootstrap

解决方案

这对我有用：

:host {
    position: fixed;
    top: auto!important;
    bottom: 0!important;
    right: auto!important;
    left: 0!important;
    margin: 0.5em;
    z-index: 1200;
}

如果您正在关注https://ng-bootstrap.github.io/#/components/toast/examples，请务必注意，“toasts-container.component.ts”文件没有样式。您需要在此处添加此代码或将“toasts-container.component.scss”文件与它绑定。

推荐阅读