在屏幕的不同位置放置不同的物化吐司[版本: 1.0.0 ]
在屏幕的不同位置放置不同的物化吐司[版本: 1.0.0 ]
提问于 2019-07-13 01:27:40
我想要在图像放大时在屏幕的中上部显示一个吐司，并在默认位置显示其他正常的吐司。我已经成功地在放大时显示了吐司，但无法定位吐司。
我已经尝试更改"#toast-container“，但它将所有的toast放在屏幕的相同位置。
#toast-container {
top: auto !important;
right: auto !important;
bottom: 10%;
left:3%;
}期望: toast 1:屏幕中上角；toast 2:屏幕右上角或屏幕底部。
回答 1
Stack Overflow用户
发布于 2020-01-15 06:48:45
如果不添加一些代码，就无法完成您所要求的工作(MaterializeCSS的核心中没有任何用于定位toast的内容)；但是，在初始化toast之后，您可以使用一些jQuery向#toast-container添加一个类。然后你就可以样式化那个类了。
选项1:
例如：
// Initialize Toast
var duration = 3000;
Materialize.toast('Toast Message', duration, 'rounded');
// Add Class to Container
$('#toast-container').addClass('bottom-right');
// OPTIONAL : Remove Class from Container after Timeout
setTimeout(() => $('#toast-container').removeClass('bottom-right'), duration);然后根据需要创建CSS类来覆盖核心CSS。
例如：
#toast-container.bottom-right {
top: unset;
bottom: 10%;
}
#toast-container.bottom-left {
top: unset;
right: unset;
bottom: 10%;
left: 7%;
}选项2:
您可以将类应用于.toast元素，并为其赋予position: fixed以将其放置在您想要的任何位置。
尽管如此，动画将会有问题，所以你可能不得不与这些摔角……或者通过将.toast设置为transition: none !important来完全关闭动画
来源：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57011592
复制相关文章
相似问题
腾讯云开发者
