CODEWITHSUNDEEP
ionic-frameworkionic4
Strider
Strider

Reputation: 3749

Ion ripple effect not working inside a plain html button

In an Ionic v4 app, the ion ripple effect isn't showing while clicking on a plain html button:

<button type="submit" form="myForm">
  <ion-ripple-effect></ion-ripple-effect>
  <ion-icon src="pathToButtonIcon\button-icon.svg"></ion-icon>
  <ion-text text-capitalize>buttonText</ion-text>
</button>

A similar example is given in The Ionic Docs, but it's not working for me.

Upvotes: 2

Views: 1099

Answers (2)

monkey
monkey

Reputation: 1651

Just adding my 10 cents with some more up to date information. Since the move to standalone angular components in Ionic, this is a nice way to make use of the ripple in your custom components:

monkey-chip.component.ts

import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

import { IONIC_IMPORTS } from '@monkey/ngx/components/ionic-component.imports';
import { IonRippleEffect } from '@ionic/angular/standalone';


@Component({
  selector: 'monkey-chip',
  templateUrl: './monkey-chip.component.html',
  styleUrls: ['./monkey-chip.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [
    CommonModule,
    IONIC_IMPORTS,
    IonRippleEffect  // ** important that you import this here!
  ],
})
export class MonkeyChipComponent {
  ...

monkey-chip.component.html

I found it was useful to throw a class into the ion-ripple-effect so I could mess around with it directly...

<ion-div
  class="ion-activatable"
  [ngClass]="classes"
  (click)="onClick()"
>

  <span class="monkey-chip-text">
    {{ text }}
  </span>

  <ion-ripple-effect class="ripple-effect"></ion-ripple-effect>

</ion-div>

monkey-chip.component.scss

// subdue ripple effect or whatever you want to do!
.ripple-effect {
  opacity: 0.1;
  // color: blue; // pretty ugly it but will work!!!
}

.monkey-chip {
  ...

  // Needed for ion ripple
  position: relative; // Required for ripple effect
  overflow: hidden; // Clip ripple animation to the chip bounds

 ...

Hope this is useful!

Upvotes: 1

Strider
Strider

Reputation: 3749

I had to add the ion-activatable class to the button to make it work:

<button class="ion-activatable" type="submit" form="myForm">
  <ion-ripple-effect></ion-ripple-effect>
  <ion-icon src="pathToButtonIcon\button-icon.svg"></ion-icon>
  <ion-text text-capitalize>buttonText</ion-text>
</button>

Upvotes: 2

Related Questions