修改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()
}