Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material 2 - Disable Ripple?

I'm currently working with md-tab-group (just updated to latest version yesterday)...

Does anyone know

  1. if it is possible to disable/configure Ripple on existing components (md-tab-group in this case)? Latest version causes my tab headers to jump because ripple is calculating large values, solution is to add a small value for md-ripple-max-radius for md-tab-label directly in the template of MdTabGroup.
  2. if there are plans to remove min-width for md-tab-labels? I'm working with a quite small tab group (only 300px width), therefore 160px min-width is not usable.

Thank you!

like image 364
Cleudi Avatar asked Dec 15 '16 10:12

Cleudi


People also ask

How do I disable mat ripple?

The animation of ripples can be disabled by using the animation global option. If the enterDuration and exitDuration is being set to 0 , ripples will just appear without any animation.

What is MDC ripple?

MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.

What causes ripple effects?

A ripple effect occurs when an initial disturbance to a system propagates outward to disturb an increasingly larger portion of the system, like ripples expanding across the water when an object is dropped into it.

What is ripple effect in Android?

The touch feedback in Android is a must whenever the user clicks on the item or button ripple effect when clicking on the same, gives confidence to the user that the button has been clicked so that they can wait for the next interaction of the app.


1 Answers

Use disableRipple as an attribute to disable ripples for the md-tab-group as Angular2+ using the Angular material.

Just simply do something like this:

<md-tab-group disableRipple></md-tab-group> 

Also if you are using the latest Angular Material, it's a little bit different like this below:

<mat-tab-group [disableRipple]="true"></mat-tab-group> 
like image 137
Alireza Avatar answered Sep 28 '22 12:09

Alireza