Ionic - Ripple effect manually

Ionic Framework ionic-v3
1

Hey everybody!

I want to add a ripple effect to the header of a card, because it is touchable. I don’t want to make it a button, though, because

  1. The CSS would get a bit weird, as I want to do some custom things with it
  2. It doesn’t really represent the semantics of what it is.

So, my question is, I’m creating a directive for this sort of thing. How do I manually add the ripple effect on click/tap for it?

Thanks!

1 Like
2

Hello? Is anybody there? I have no idea how to do this.

3

We have the same question, and we couldn’t find the way either. Can someone from the Ionic team point us in the right direction?

Thanks

4

Well, I dug through the Ionic 2 code a bit a while ago, and I found some directive called ‘ionic-button-effect’. I haven’t had time to test it, though, perhaps you could try it out and save me some time?

5

I tried adding <ion-button-effect></ion-button-effect> and tapping the card creates a ripple, in the right position of the X axis but out of the card (just below the navbar, where I assume is the closest <button>). It looks is designed to work with buttons only.

6

I am using cards and this would be awesome. I think I have a work around by putting the click action on the card and just below that a button tag with an ion-item attribute. The problem then is the if there is any ion-item tags you’d have to style the background to transparent.

<ion-card (click)="action()"> <button ion-item> <ion-item style="background: rgba(0,0,0,0);">Content</ion-item> </button> </ion-card>

3 Likes
7

@El_Dee565 Eh, it’s a good enough workaround. Thanks!

8

Not works completely for me.

If I put a large text inside a <ion-card-content> or <p> pair of tags the text will not be broken into multiple lines.

9

Hi El_Dee!

Thank you for your answer! It works for me.

Hopefully, next releases will come with this feature implemented.

10

CaptainYouz, I doubt. MDL not implement ripple in cards. So probably Ionic 2 also wil not implement.

The correct pattern is to add a link button bellow the card like this. The button will give you the feedback.

11

Hi Natanael.

Actually I was more thinking about having the possibility to have the ripple effect on others elements rather that only on buttons.

In material design specification, it says

Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.

See more: Material Design and Material Design

12

CaptainYouz, this was also my initial idea, but if you five a look ant MDL examples you will not find ripple in too much places.

13

Works for me
http://stackoverflow.com/a/42005485/4671822

<ion-card tappable>
                  <button ion-item>
                  <ion-item  style="background: rgba(0,0,0,0);">
                    <h2>Chef</h2>
                    <ion-thumbnail item-center>
                      <img src="img/image.svg" class="logo-services">
                    </ion-thumbnail>
                  </ion-item>
                  <ion-card-content>
                    <p>Text</p>
                  </ion-card-content>
                  </button>
                </ion-card>
2 Likes
14

Hi,
I see its late. But try Pure CSS ripple effect:

1 Like
15

As I see by sources of Ionic v3.3, a container element must contain an empty div element with button-effect class, also the container must have tappable attribute and be styled as position: relative; overflow: hidden.

In my project I use a following directive to style button-like containers:

import {Directive, ElementRef, Host, Renderer2} from '@angular/core';

@Directive({
    selector: '[m-ripple-effect]',
    host: {
        'tappable': '',
        'role': 'button',
        'style': 'position: relative; overflow: hidden'
    }
})
export class RippleEffectDirective {
    constructor(@Host() host: ElementRef, renderer: Renderer2) {
        const div = renderer.createElement('div');
        renderer.addClass(div, 'button-effect');
        renderer.appendChild(host.nativeElement, div);
    }
}
2 Likes
16

@mnasyrov I think the proposed solution is the most elegant, but i can’t make it work on Ionic v3.5. Have you tested or do you use this solution?

17

I’m using the workaround with Ionic v3.3, have not tested it with 3.5 yet. Upgrading is planned only over a week…

18

hi, so is it working on v3.6 or v3.5 ?

19

For recent Ionic versions add renderer.setStyle(div, "display", "block"); to the directive, like:

import {Directive, ElementRef, Host, Renderer2} from '@angular/core';

@Directive({
    selector: '[m-ripple-effect]',
    host: {
        'tappable': '',
        'role': 'button',
        'style': 'position: relative; overflow: hidden'
    }
})
export class RippleEffectDirective {
    constructor(@Host() host: ElementRef, renderer: Renderer2) {
        const div = renderer.createElement('div');
        renderer.addClass(div, 'button-effect');
        renderer.setStyle(div, "display", "block");
        renderer.appendChild(host.nativeElement, div);
    }
}
7 Likes
20

@jlcarv Thank you to the fix! The directive now works with Ionic 3.9.2.