离子中的 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 自定义位置的主要内容,如果未能解决你的问题,请参考以下文章