ionic-framework - 使用离子警报评级警报/功能
解决方案
创建警报的 JS/TS 部分 -
showRatingAlert() {
const alert = this.alertCtrl.create({
title: 'Rate this app',
cssClass: 'rating_alert',
buttons: [
{ text: '1',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: '2',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: '3',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: '4',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: '5',
handler: data => { return false; }, // prevents from closing the alert
cssClass: 'rate-icon-button'
},
{ text: 'Later', handler: data => { }, cssClass: 'rate-action-button rate-later' },
{ text: 'Submit', handler: data => { }, cssClass: 'rate-action-button rate-now' },
],
});
// add event listener for icon buttons in ask rating alert popup
setTimeout(()=>{
const buttonElms: NodeList = document.querySelectorAll('.rating_alert .alert-button-group .rate-icon-button');
for(let index = 0; index < buttonElms.length; index++) {
buttonElms[index].addEventListener('click', this.selectedRatingHandler);
}
}, 500);
}
selectedRatingHandler = (event: MouseEvent)=>{
// handler for clicked rating icon button
let target: any = event.target; // target element
let siblings: HTMLCollection = target.parentElement.children; // list of all siblings
for(let index = 0; index < siblings.length; index++){
siblings[index].classList.remove('selected-rating'); // remove selected class from all siblings
}
target.classList.add('selected-rating'); // add selected class to currently selected item
};
用于样式元素/按钮的 CSS/SCSS 部分 -
.rating_alert{
border-radius: 8px;
.alert-wrapper{ border-radius: 8px; }
.alert-button-group{
padding:0;
margin-top: 10px;
flex-direction: row;
justify-content: space-around;
// flex-direction: row; justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
button{
flex: 1 1 20%;
&.rate-icon-button{
width: 40px;
max-width: 20%;
min-width: auto;
height: 40px;
margin: 0 !important;
background-image:url('../assets/img/emotions.png');
background-repeat: no-repeat;
background-position: center;
border: none;
.button-inner{
visibility: hidden;
}
&:nth-child(1){ background-position-y: 3px; }
&:nth-child(2){ background-position-y: -36px; }
&:nth-child(3){ background-position-y: -76px; }
&:nth-child(4){ background-position-y: -114px; }
&:nth-child(5){ background-position-y: -153px; }
&.selected-rating{
position: relative;
overflow: visible;
&:after{
content: '';
position: absolute;
bottom: -4px;
height: 4px;
background-color: #2E6DFF;
width: 80%;
left: 10%;
}
}
}
&.rate-action-button{
text-align: center;
margin-top: 20px;
margin-right: 0;
border-top: 1px solid #c3c3c3;
.button-inner{
justify-content: center;
}
&.rate-later{
border-right: 1px solid #c3c3c3;
}
&.rate-now{
border-left: 1px solid #c3c3c3;
}
}
}
}
本例中使用的图像文件。
推荐阅读
- python - 我想知道如何使用带有 XYZ 值的 python matplotlib 进行绘制
- java - 将 CSV 文件中的非结构化数据转换为 JSON 格式的数据?
- python - 如何选择多列和多行
- java - 在通过 Fcm 的 Firebase 动态链接中,它只是打开应用程序而不是进入活动
- python - 现有演示文稿中每张 pptx 幻灯片的形状编号/索引
- python - 如何将此代码从 Keras 转换为 Tensorflow?
- android - 无法构建用于测试的 apk
- excel - 如何在特定单元格中显示数据?
- git - git pull 在同一个本地存储库中的一个分支
- c++ - 读取 ppm 文件并转换为灰度或反转