造型离子2吐司

Question

有什么方法可以在 ionic 2 toast 中设置文本消息的样式吗？

我试过这个：

    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

您应该能够使用 .toast-message 选择器更改 css 中的任何消息样式：

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

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

Answer 2

可以完成，但是需要自己修改toast组件模板。

通过资源管理器： \node_modules\ionic-angular\components\toast\toast.js

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

Answer 3

我能够通过在烤面包机创建

上添加自定义 class 来实现烤面包机颜色变化

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

在该页面的 scss 文件中，我然后超出了默认的嵌套页面名称（因为烤面包机 NOT 在 ion 页面名称的根目录中）。尽管这有点 hacky，但我只是在我添加的自定义 class 之后明确针对下一个 div 元素

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

我说它很老套，因为你必须在上面使用 !important。您可以通过用 .md,.ios,.wp{...

包装 .toast-success 来避免 !important

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

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

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

Answer 4

您必须在 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 class 添加任何功能。但是您的 css 功能超出了默认页面'css。例如：

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

Answer 5

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

来覆盖 src/theme/variables.scss 中的 toaster SASS 变量

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

这会覆盖默认样式请参考这个Overriding Ionic Sass variable

Answer 6

首先，从 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 中查看最佳示例。我认为它会对你有所帮助。 :)

或者检查这个的答案。

Answer 7

如果在app.scss中定义自己的cssclass（不在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 8

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

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

上面的方法我都试过了，还是不行，所以我找到了一个新的解决方案，你需要cssClass页外的css声明：

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

Answer 10

不确定旧的 Ionic 版本，但在 Ionic 5 中你不能直接更改内部 CSS 因为它被封装在阴影中

<ion-select>
  #shadow-root
    <div class="toast-container" part="container">
       ...
    </div>
</ion-select>

因此，要更改 cssClass 中的 .toast-container（例如），您应该使用：

.my-custom-class::part(container) {
    flex-direction: column;
}

.my-custom-class {
    .toast-container {
        flex-direction: column; // will not work
    }
}

Answer 11

我将 ionic v5 与 angular 一起使用，并且根据：https://ionicframework.com/docs/api/toast#css-shadow-parts

你可以这样做：

::ng-deep{
    ion-toast::part(container) {
        ...
    }
    ion-toast::part(message) {
        ...
    }
}

造型离子2吐司

Styling ionic 2 toast

toast

ionic2