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
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!
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
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?
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.
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>
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.
Hi El_Dee!
Thank you for your answer! It works for me.
Hopefully, next releases will come with this feature implemented.
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.
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: https://material.google.com/motion/material-motion.html#material-motion-how-does-material-move and https://material.google.com/motion/choreography.html#choreography-radial-reaction
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.
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>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);
}
}
@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?
I’m using the workaround with Ionic v3.3, have not tested it with 3.5 yet. Upgrading is planned only over a week…
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);
}
}