使用离子警报评级警报/功能 [英] Rating alert/feature using Ionic alert

问题描述

我想使用

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.

这篇关于使用离子警报评级警报/功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！