美文网首页
Ionic3全局修改toast样式

Ionic3全局修改toast样式

作者: 贴地飞行的胖纸 | 来源:发表于2019-05-06 10:20 被阅读0次

    背景

    在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

    相关文章

      网友评论

          本文标题:Ionic3全局修改toast样式

          本文链接:https://www.haomeiwen.com/subject/ybaloqtx.html