CODEWITHSUNDEEP
angularjsmaterial-designangular-material
Simon H
Simon H

Reputation: 21005

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

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}}">
                 ...

Upvotes: 11

Views: 20595

Answers (6)

Svetlana Rozhkova
Svetlana Rozhkova

Reputation: 178

Here is the best way to do it:

<div md-ink-ripple class="ripple">Div like an md-button</div>
  1. add to your div md-ink-ripple directive
  2. 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%;}
}

`

Upvotes: 0

mutp
mutp

Reputation: 2389

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!

Upvotes: 5

poxip
poxip

Reputation: 907

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).

Upvotes: 11

Mateus AJ Leon
Mateus AJ Leon

Reputation: 1382

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.

Upvotes: 2

sarunast
sarunast

Reputation: 2443

If you want to use ripple effect on specific elements you can use md-ink-ripple.

<div md-ink-ripple></div>

Upvotes: 31

Splaktar
Splaktar

Reputation: 5894

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>

Upvotes: 0

Related Questions