文件目录结构:
在使用ionic3来写toast效果时,会有各种各样对toast样式的需求,
在全局的app.scss中添加以下内容
备注:(这里的样式也可以放置在组件的scss文件中,但是是独立开来的,不要嵌套在组件的page-xxx中去)
//吐司颜色、大小
.box {
width: 200px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.toast-container {
width: 100%;
}
.error {
.toast-message {
color: #a94442;
}
.toast-wrapper {
background: #f2dede;
@extend .box;
}
}
.success {
.toast-message {
color: #3c763d;
}
.toast-wrapper {
background: #dff0d8;
@extend .box;
}
}
.tip {
.toast-message {
color: #31708f;
}
.toast-wrapper {
background: #d9edf7;
@extend .box;
}
}
.toast-md .toast-wrapper.toas