Question

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

我试过这个：

＆＃13;

    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);
  }

＆＃13;

但显然你不能在文字中使用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文件中，我走出了默认的嵌套页面名称（因为烤面包机在离子页面名称的根目录中是 NOT ）。虽然这有点hacky我只是在我添加的自定义类之后明确地定位了下一个div元素

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

我说它的hacky是因为你必须在它上面使用!important。您可以使用.toast-success

包裹.md,.ios,.wp{...来避免使用！important

您可以通过覆盖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;
}

或者您可以查看此link中的最佳示例。我认为它会对你有所帮助。：）

或者查看此link上的答案。

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);

Answer 5

Ionic 2提供了一种非常有用的方法来覆盖它们的组件样式，你可以通过添加

覆盖src / theme / variables.scss中的多士炉SASS变量

$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;

这将覆盖默认样式，请参阅此Overriding Ionic Sass variable

Answer 6

您可以完成，但是您需要修改Toast组件模板本身。

通过资源管理器： \ node_modules \离子 - 角\部件\吐司\ toast.js

更改第194行（模板）： {{d.message}}至<div [innerHTML]='d.message'></div>

Answer 7

您应该可以使用.toast-message选择器更改css中的任何邮件样式：

.toast-message { 
    font-family: Helvetica,
    color: red
}

或者，如果您查看文档（http://ionicframework.com/docs/v2/api/components/toast/Toast/），可以使用cssClass属性为您的toast分配一个特定的类，然后设置样式。

Answer 8

更改吐司背景颜色和不透明度：

let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      cssClass: 'changeToast'
    });

并添加app.scss：

.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};

它与.toast-message

一起使用

Answer 9

我在上面进行了所有尝试，但仍然无法正常工作，因此我遇到了一个新的解决方案，您需要在页面css声明之外添加cssClass：

let toast = this.toastCtrl.create({
          message: msg,
          duration: 3000,
          position: 'bottom',
          cssClass: 'toastcolor'
        });

post-list.scss这样的

page-post-list {

}
.toastcolor .toast-message {
    background-color:skyblue;
}

造型离子2吐司

9 个答案: