Angular material design ripple on md-list > md-item - angularjs

Question

I have a list of items (each of which includes multiple elements) where each item is clickable and switches view. Is there a way to get the ripple effect on the whole md-item-content? I tried class="ripple" but that was not sufficient.
<md-content>
<md-list layout="column" md-padding>
<md-item ng-repeat="resto in list.data.recommendations">
<a ui-sref="resto({qname: resto.qname})" class="ripple">
<md-item-content id="resto{{$index}}">
...

Answer 1

If you want to use ripple effect on specific elements you can use md-ink-ripple.
<div md-ink-ripple></div>

Answer 2

Just add a md-ink-ripple directive and .md-clickable class to the <md-list-item> element:
<md-list-item md-ink-ripple class="md-clickable">
<p>Foo</p>
</md-list-item>
Also you can set the font-weight to 500 if you wish (that is how a default clickable-item looks like).

Answer 3

The other answers cover most of the cases but you can also customize the color of the ripple effect by using
<md-list-item md-ink-ripple="#03A9F4">
<p></p>
</md-list-item>
This will give a light blue ripple color.
The team behind Angular Material wanted to keep this internal and reduce customization which is why they haven't documented it well. However, I thought it was a useful customization. Hope it helps! Cheers!

Answer 4

Actually, there's lack of documentation over this.
I was searching for a solution and found your ask here, so I went to check their source code.
You can use md-list > md-list-item with several restrictions. In your case, the idea is to get close to their docs menu, on sidenav (theirs is a directive called menu-link, on the link itself), and I've acomplished with some modifications in my original code (which were close to yours):
<md-list>
<md-list-item
ng-repeat="section in ::admin.sections"
ng-class="{
'active': $state.includes(section.active),
'disabled': section.disabled
}"
ng-click="!section.disabled && $state.go(section.state)">
<span ng-bind="::section.label"></span>
</md-list-item>
</md-list>
Basically, isn't all elements that are accepted as action-triggers inside md-list-item. md-checkbox and md-switch are the only childs that are accepted to do a process, inside preLink function on md-list-item directive.
The other way is to put a ng-click on the md-list-item itself, or in a child element, inside it.
The preLink process is a wrapper, using a "non-styled" button that do a "proxy" on the click, and visually acomplishes the ripple effect.
Other things, like attributes, too, aren't being transferred to this "proxy", so a disabled cannot be used directly, you need to simulate its results. In my case, I interrupt the ng-click action, and put a class into the element.

Answer 5

I would suggest using md-button if you want ripples instead of the anchor. Then just do your ui-router state change in the controller.
See https://github.com/angular/material-start/blob/master/app/index.html#L30 for an example.
<md-list layout="column" md-padding>
<md-item ng-repeat="resto in list.data.recommendations">
<md-button ng-click="vm.navigateToResto(resto)" ng-class="{'selected' : it === vm.selected }" id="resto{{$index}}">
...
</md-button>
</md-item>
</md-list>

Answer 6

Here is the best way to do it:
<div md-ink-ripple class="ripple">Div like an md-button</div>
add to your div md-ink-ripple directive
add ripple class to your div:
`
.ripple {
position: relative;
&:active > .wave {
animation: ripple 0.25s;
}
.wave{
position:absolute;
width:100%;
height:100%;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
background-size: 0 0;
top:0;
left:0;
transform: scale(0);
opacity:0;
}
}
#keyframes ripple {
0% {transform: scaleX(0);}
50%{transform: scaleX(1);opacity:0.3;}
100%{transform: scaleX(1);opacity:0;background-size: 1000% 1000%;}
}
`