Material: How to disable ripple (ink) on a parent element without disabling ripple on its children elements?

Created on 8 Mar 2015 · 6Comments · Source: angular/material

Hi folks,

I use md-no-ink to disable ripple on a parent element and add md-ink-ripple on its children element, but they both lose ripple effects. Is there a method I can only disable the parent element's ripple effect?

can't reproduce ink

Source

aeroxy

👍1

Most helpful comment

<md-list md-no-ink>
        <md-list-item md-ink-ripple ng-repeat="item in items">
          <p> {{item}} </p>
        </md-list-item>
</md-list>

results in no ink ripple

jgknott on 2 Feb 2016

👍10

All 6 comments

Can you provide a plunker with your problem?

EladBezalel on 9 Mar 2015

Having the same issue, when setting md-ink-ripple on md-list-item, the parent element md-list adopts the same ripple setting.

miclaus on 9 Oct 2015

Can you please check if it's happening on HEAD?
Couldn't reproduce

EladBezalel on 7 Nov 2015

Closing for now, if it's still happening please ping and i'll reopen this issue.

EladBezalel on 15 Nov 2015

<md-list md-no-ink>
        <md-list-item md-ink-ripple ng-repeat="item in items">
          <p> {{item}} </p>
        </md-list-item>
</md-list>

results in no ink ripple

jgknott on 2 Feb 2016

👍10

Besides, I have found no way to add a md-menu to a md-list-item without all the list-item becoming clickable (and with added ripple).

In the directive documentation it's stated that "The md-list-item component automatically detects if the list item should be clickable.". This is nice, but it would be great if it could be controlled manually. I want the md-menu to deploy when the user clicks on the menu icon on the right, not all the list-item:

Besides, in the md-list demo page, there's one in the last section that seems to achieve this behaviour (clicking the button to the right will fire the secondary action) showing that it's possible to do with a button, but unfortunately it doesn't seem to work with anything else.