美文网首页ionic4
修改toast默认样式

修改toast默认样式

作者: 追逐繁星的阿忠 | 来源:发表于2018-10-08 16:43 被阅读194次

    效果图:


    toast样式调整.png

    第一步:在app.scss文件中引入公共样式,文字居中:

    //修改文字显示的字体大小和距离顶部高度
    .toast-message {
    
      display:flex;
    
      justify-content:center;
    
      font-size: .8em;
    
      padding-top: 8px;
    
    }
    

    第二步:找到variables.scss文件,然后随便找个位置加入下面的样式代码:

    //修改toast样式
    
    $toast-max-width: 300px;
    
    $toast-md-background: #FF5F40;
    
    $toast-wp-background:#FF5F40;
    
    $toast-ios-background: #FF5F40;
    
    $toast-md-title-color:#ffffff;
    
    $toast-ios-title-color:#ffffff;
    
    $toast-wp-title-color:#ffffff;
    

    第三步:调用说明:这里只做测试用法展示:

        showToast(){
            let toast = this.toastCtrl.create({
                message: '今天会下雨吗',
                duration: 30000,
                position: 'middle',
    
            })
            toast.present()
        }
    

    相关文章

      网友评论

        本文标题:修改toast默认样式

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