离子中的 ToastController 自定义位置

Posted

技术标签:

【中文标题】离子中的 ToastController 自定义位置【英文标题】:ToastController custom position in ionic 【发布时间】:2018-07-16 09:22:22 【问题描述】:

我们正在创建 Ionic-Native 移动应用程序。我们正在使用 ToastController (ToastController)。我们使用 position: 'top' 。但它与状态栏重叠。所以我们想要自定义位置。我们试过这样

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



    .toast
    margin-top: 70px;
  

但没有运气。自定义位置有什么想法吗?

【问题讨论】:

【参考方案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 代码 sn-p 需要在 page CSS 之外,因为 .toast-wrapper 在页面之外。

【讨论】:

我必须删除.toast-wrapper 选择器,请参阅github.com/ionic-team/ionic/issues/17499

以上是关于离子中的 ToastController 自定义位置的主要内容,如果未能解决你的问题,请参考以下文章

如何使用一个信号向离子和电容器推送通知添加自定义声音

自定义组件中的 Ionic 4 颜色属性

离子自定义组件重叠内容

离子添加平台 android 与自定义 android-target

如何在离子中获取自定义数据属性的值?

如何在离子项目中导入cordova自定义插件?