Question

当图像放大时，我想在屏幕的顶部中间显示一个祝酒词，其他普通祝词要显示在默认位置。放大时我设法显示了吐司，但无法定位吐司。

我已经尝试过更改“＃toast-container”，但是，它将所有吐司放置在屏幕的同一位置。

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:3%;  
}

预期：吐司1：在屏幕上方中间；吐司2：在屏幕右上方或底部。

Answer 1

没有添加一些代码就无法完成您所要的事情（MaterializeCSS没有将其放置到定位吐司的核心中）；但是，在初始化吐司之后，可以使用一些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来完全关闭动画 >

来源：https://github.com/Dogfalo/materialize/pull/658

在屏幕的不同位置放置不同的Materialize吐司[版本：1.0.0]

1 个答案: