离子中的 ToastController 自定义位置

Question

我们正在创建 Ionic-Native 移动设备 app.We 正在使用 ToastController (ToastController)。我们使用了 position: 'top' 。但是它重叠到状态 bar.So 我们想要自定义位置。我们试过这样

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 向下移动。

这是一个完整的代码示例：

你的页面.ts

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

你的页面.css

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

注意：这个CSS代码片段需要在page之外CSS因为.toast-wrapper在外面页面的。

离子中的 ToastController 自定义位置

ToastController custom position in ionic

css

android-toast

ionic-framework

ionic2