使用离子警报评级警报/功能

本文介绍了使用离子警报评级警报/功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想使用

I wanted to create a rating alert feature using Ionic alert. This is how it looks.

Go through the answer for detailed codes. This works properly in all browsers and platforms(as much as I have tested on).

解决方案

The JS/TS part to create alert -

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 };

The CSS/SCSS part to style elements/buttons -

.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; } } } }

The image file used in this example.