时间戳

首页 > 解决方案 > 我们可以自定义离子吐司关闭按钮吗？

ionic-framework - 我们可以自定义离子吐司关闭按钮吗？

问题描述

我正在尝试为离子吐司按钮添加背景颜色，但未能成功。我在 global.scss 中尝试了下面的 css。有人能告诉我我怎样才能做到这一点。？

  .positive-toast-message {
       --min-width: 60%;
       --background: #bde7c3;
       --color: black;
       --button-color: black;
       .toast-button {
        --background: red !important;
        background: white !important;
        background-color: blue !important;
       }
   }

创建 Toast 后，它会正确应用“positive-toast-message”css

标签： ionic-frameworkionic2ionic4

解决方案

如果你想这样做，那么你应该使用 css 类。像这样叫吐司

const toast = await this.toastCtrl.create({
    message: 'Please Fill all fields',
    duration: 30000,
    position: 'top',
    cssClass: 'toast-bg'
  });

  toast.present();

然后转到 global.scss 文件并将这个类放在那里

.toast-bg {
  --background: blue;
  --button-color: #ffffff;
}

这应该有效。在 global.scss 的 css 类中将颜色更改为您想要的任何颜色

推荐阅读