更改Toast消息Ionic 4的背景颜色

Question

如何更改吐司消息的背景颜色？

我已经尝试过：但是没有运气。这是由于shadow DOM效应造成的吗？

variable.scss

--background:red;

global.scss

ion-toast>.toast-wrapper {
    background-color: red !important;
}

.ts

  async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      message: data,
      duration: 3000000,
      position: 'bottom'
    });
    toast.present();
  }

Answer 1

您可以在烤面包参数中设置颜色：

 const toastController = document.querySelector('ion-toast-controller');
 await toastController.componentOnReady();
 const toast = await toastController.create({
   showCloseButton: false,
   message: 'test toast message',
   position: 'top',
   duration: 2000,
   color: 'danger'
 });
 await toast.present();

Answer 2

首先定义这样的类：

import numpy as np
import pandas as pd
import sklearn.feature_selection as fs

#creating two correlated normal variables
n = 100
cov = [[1.0, 0.75], 
       [0.75, 1.0]]
x = np.random.multivariate_normal([0,0], cov, n)

x1 = x[:,0]
x2 = x[:,1]    

#turning them into discrete values (with the pandas quantile function)
#I am using two different number of categories for the two variables, 
#which makes the effect I am talking about much more pronounced
x1_q = pd.qcut(x1, q=5, labels=False)
x2_q = pd.qcut(x2, q=15, labels=False)

#need to turn one of them into a two dimensional array
#in order to use the chi2 function

x2_m = x2_q.reshape(n, 1)
chi2_1 = fs.chi2(y=x1_q, X=x2_m)

#now I reverse the order
x1_m = x1_q.reshape(n, 1)
chi2_2 = fs.chi2(y=x2_q, X = x1_m)

然后将类作为参数传递给敬酒选项：

indices:
  - name: test
    template: raw*
    liveLength: 1d

Answer 3

在创建吐司的同时添加cssClass属性，并为其添加类名

 async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      message: data,
      duration: 3000000,
      position: 'bottom',
      cssClass: 'toast_style'
    });
    toast.present();
  }

添加样式类

.toast_style {
background-color:red;
}

在此处{@ 3}参考吐司的离子文件

Answer 4

确保在公共.scss文件中声明sytle类。我认为它在Ionic 3中被称为app.scss，在Ionic v4中被称为global.scss。

Answer 5

您可以使用应用程序调色板中的颜色。默认选项为：primary、secondary、tertiary、success、warning、danger、light、{{1} }，和medium。

dark

了解更多详情Ionic docs