Ionic3全局修改toast样式

背景

在ionic3中toast的样式默认是黑底白字,客户感觉黑底白字不太吉利,所以要修改一下背景色。

修改方法

在网上查找到的方法是:

  1. 添加自定义样式
  2. 修改toast的cssClass

代码类似这样:

this.toastCtrl.create({
    message: messages,
    duration: 100000,
    position: 'top',
    cssClass: 'error'
});

参考:https://www.jianshu.com/p/e37d67bddf5d

但是原有项目中有N个地方使用toast,全局替换可行,但是感觉有点麻烦:(

全局修改

编辑文件src/theme/variables.scss,添加样式

$toast-ios-background: #379dfc;
$toast-md-background: #379dfc;
$toast-wp-background: #379dfc;

可全局修改toast的背景颜色。

还可以修改字体颜色,字体大小等,具体可以参考:https://ionicframework.com/docs/v3/api/components/toast/ToastController/#sass-variables

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容