目录
- 1、该弹框通过ts文件来实现代码如下:
- 2、修改样式
- 3、运行结果如下:
- 4、修改的样式不起作用解决方案
-
小编最近需要做个基于ionic3的弹框功能,样式如下:
1、该弹框通过ts文件来实现代码如下:
message:"<img src='assets/imgs/ceshi.png'/>",
buttons: [
{
text: '点此购买',
handler: () => {
if(money<5){
super.showToast(this.toastCtrl, "抱歉,积分不足!")
return;
}else{
this.buyTicket();
}
}
}
]
});
confirm.present();
运行结果如下:
2、修改样式
这个运行结果不符合项目需求,所以需要调样式:
首先在ts文件中添加一行代码,对于这个弹框绑定样式:
scss代码如下(该代码只有在全局变量时才可起作用,例如app.css,或组件的scss样式外部):
.tankuang{
.alert-message {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background-color: red !important;
padding: 0px !important;
border-radius: 5px !important; /*这句就是重点,让边框变为圆角*/
}
.alert-head{
padding: 0px !important;
}
.alert-button-group{
margin-top: -1px !important;
border-radius: 5px !important; /*这句就是重点,让边框变为圆角*/
padding-left: 0px !important;
margin-right: 25% !important;
}
.button-inner{
font-size: 23px !important;
text-align: center !important;
color: blue;
font-weight:bold;
}
.alert-wrapper{
border-radius: 5px !important; /*这句就是重点,让边框变为圆角*/
border: 1px solid #CCC !important; /*让边框变为1px宽度,直线,#CCC颜色*/
background-color: blue($color: #99CCFF) !important;
}
.disable-hover alert-button alert-button-ios alert-button-default alert-button-default-ios{
padding-left: 25%;
}
}
3、运行结果如下:
4、修改的样式不起作用解决方案
使用ionic封装的组件时,也对组件封装好了样式,如果想要改样式需要同样的class名字进行修改。在同样的名字下使用样式有优先级顺序,可能你的代码样式不起作用,这时候可以强制修改组件样式,在修改的样式结尾钱加上“!important”,代码如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background-color: red !important; //强制使用该样式
padding: 0px !important; //强制使用该样式
border-radius: 5px !important; /*这句就是重点,让边框变为圆角*/
}
1)强制修改样式后续问题:
如果对这个组件强制修改了样式,系统中所有该组件样式都会修改。该例子中解决方案为alter弹框的样式是针对例子中tankuang而定制的样式
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)