造型离子2吐司

Question

有没有办法在离子2吐司中设置文本消息的样式？

我试过这个:

    let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true
    });

    toast.onDismiss(() => {
      console.log('Dismissed toast');
    });

    this.nav.present(toast);
  }

但显然你不能在文本中使用html所以我猜我的问题的答案是否定的？

Answer 1

您必须在toastCtrl函数中添加'cssClass:"yourCssClassName"'.

 let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true,
      cssClass: "yourCssClassName",
    });

比你可以添加任何功能到你的CSS类.但是你的css功能超出了默认的page'css.Exmp:

   page-your.page.scss.name {
     //bla bla
    }
 .yourCssClassName {
   text-align:center;
  }

Answer 2

通过在烤面包机上添加自定义类,我能够实现烤面包机颜色变化

let toast = this.toastCtrl.create({
    message: 'Foobar was successfully added.',
    duration: 5000,
    cssClass: "toast-success"
  });
  toast.present();
}

在该页面SCSS文件然后我去的默认页面嵌套外面的名字(因为烤面包机是不是离子页面名称事情根内侧).虽然这有点hacky我只是div在我添加的自定义类之后明确地定位了下一个元素

.toast-success {
  > div{
       background-color:#32db64!important;
   }
}

我说它的hacky因为你必须使用!important它.你可以避开!重要的通过包装.toast-success用.md,.ios,.wp{...

您可以通过覆盖theme/variables.scss文件中的主烤面包机变量来覆盖样式默认值.

$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);

这只会覆盖默认值而不是自定义值.还有一些可以设置样式的变量.

Answer 3

首先,从ionic-angular构造函数中导入toast控制器并使其成为对象.

import { ToastController } from "ionic-angular";

constructor(private _tc: ToastController) {
}

在那之后,无论你想在哪里展示你的祝酒词都写下来.

let options = {
  message: "Your toast message show here",
  duration: 3000,
  cssClass: "toast.scss"
 };

this._tc.create(options).present();

这是我的scss:

.toast-message {
  text-align: center;
}

或者您可以从此链接查看最佳示例.我认为它会对你有所帮助.:)

或者检查此链接上的答案.

Answer 4

如果你在app.scss中定义自己的css类(不在page.scss中),可以使用.toast-wrapper和.toast.message来设置它的样式.不需要使用 > div{

例:

.yourtoastclass {
  .toast-wrapper {
    background: blue;
    opacity: 0.8;
    border-radius: 5px;
    text-align: center;
  }
  .toast-message {
    font-size: 3.0rem;
    color: white;
  }
}

在theme/variables.scss中,您可以设置默认值

示例(红色和小透明):

$toast-width:   75%;  /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);