离子

Question

我们正在创建Ionic-Native移动应用。我们正在使用ToastController（ToastController）。我们使用位置：＆＃39; top＆＃39; 。但它与状态栏重叠。所以我们想要自定义位置。我们试过这样的

let Errortoast = this.toastCtrl.create({
      message: 'Please try again later',
      duration: 3000,
      cssClass: 'toast',
      position: 'top'
    });



    .toast{
    margin-top: 70px;
  }

但没有运气。对于自定义职位有什么想法吗？。

Answer 1

您可以使用transform: translateY(70px);作为css属性来移动Toast。

以下是完整的代码示例：

<强> yourPage .TS

this.toastCtrl.create({
    message: 'Please try again later',
    duration: 3000,
    cssClass 'yourClass',
    position: 'top'
}).present();

<强> yourPage 的CSS

.yourClass {
    .toast-wrapper {
        transform: translateY(70px) !important;
    }
}

注意：此css代码段必须超出page css，因为.toast-wrapper位于页面之外。