ionic4

修改toast默认样式

2018-10-08  本文已影响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()
    }
上一篇下一篇

猜你喜欢

热点阅读