Ionic - Ripple effect manually

Ionic Framework ionic-v3
21

hi, so is it working on v3.20.0 ?

22

It’s working for me in v3.20.0. Perfectly, in fact!

23

hey im currently working on this, but still cant

i need to use this m-ripple-effect on my ion-card
already makes the directive as you show

but please take a look to my codes please

HTML

<div text-center>   
  <h4 text-center>Categories</h4>
      <ion-card m-ripple-effect tappable  class="categories-card">
        <div class="button-effect"></div>             
          <ion-row>                
              <ion-col text-center >
                  <img class ="center" src="assets/imgs/logo/home-icon-silhouette.png"  />
                  <a><b>Homestay</b></a>
               </ion-col>            
          </ion-row>                 
      </ion-card>          
</div>

CSS

.categories-card {
      position: relative; 
      overflow: hidden;
      border-radius: 10px;
      width: 74px !important;
      height: 60px !important;
      display: inline-block;
      margin: 7.5px !important;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

did i code wrong? so sorry still learning , im a student lol

24

You should remove the manually added button-effect div because m-ripple-effect adds the same one.

If you need a ripple effect over the image try to adjust z-index of the button-effect via styles:

.categories-card .button-effect {
  z-index: 1;
}
25

You can try https://www.npmjs.com/package/ng-ripple-module.
You can easily attach ripple effect at your cards. I hope this will help someone who still looking for the other solution.

1 Like
26

@mnasyrov

Thank You is working for me :v :smile:

27

this module helped thnx