使用Angular Material设计，如何在md-list > md-item上实现涟漪效果？

Question

我有一个项目列表（每个项目包括多个元素），其中每个项目都可以点击并切换视图。有没有办法在整个 md-item-content 上获得涟漪效果？我尝试过使用 class="ripple"，但这样不够。

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

- Simon H

---

在<md-item-content>或<md-item>上使用“ripple”效果？在http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design中，它似乎是在整个列表而不是内容上。 - paje007

#奇怪但有效的Hack <md-item ng-click="{}"> - poxip

Answer 1

如果您想在特定元素上使用涟漪效果，可以使用md-ink-ripple。

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

- sarunast

---

我如何在鼠标悬停时为md-card添加md-ink-ripple效果？ - Lalit Rane

Answer 2

只需将md-ink-ripple指令和.md-clickable类添加到<md-list-item>元素中：

<md-list-item md-ink-ripple class="md-clickable">
    <p>Foo</p>
</md-list-item>

如果您愿意，还可以将字体加粗设置为500（这就是默认的可点击项的外观）。

- poxip

Answer 3

其他答案已经涵盖了大部分情况，但您还可以通过使用来自定义涟漪效果的颜色。

<md-list-item md-ink-ripple="#03A9F4">
  <p></p>
</md-list-item>

这将产生淡蓝色的涟漪颜色。

Angular Material团队希望保持内部完整性并减少定制化，这就是为什么他们没有很好地记录它的原因。然而，我认为这是一种有用的自定义方法。希望能对你有所帮助！干杯！

- mutp

Answer 4

实际上，这方面的文档很少。

我正在寻找解决方案，并在这里找到了你的问题，所以我去查看了他们的源代码。

您可以使用md-list > md-list-item，但有一些限制。在您的情况下，想法是接近他们的文档菜单，在侧边栏上（他们的指令称为menu-link，位于链接本身上），我通过对我的原始代码进行一些修改来实现了这一点（它们与您的代码非常接近）。

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

基本上，在md-list-item内接受作为操作触发器的元素不仅限于md-checkbox和md-switch。这些是仅被接受在md-list-item指令的preLink函数内完成处理的子元素。

另一种方法是在md-list-item本身或其内部子元素上放置ng-click。

preLink过程是一个包装器，使用一个“非样式”按钮来执行“代理”单击，并在视觉上实现涟漪效果。

其他例如属性等也没有传递到此“代理”，因此disabled不能直接使用，您需要模拟其结果。在我的情况下，我中断了ng-click操作，并将类放入元素中。

- Mateus Leon

Answer 5

我建议使用md-button代替anchor，如果你想要水波纹效果。然后在控制器中进行ui-router状态更改即可。

请参见https://github.com/angular/material-start/blob/master/app/index.html#L30以获取示例。

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

- Splaktar

Answer 6

这是最好的方法：

<div md-ink-ripple class="ripple">Div like an md-button</div>

将以下内容翻译成中文：

1. 在你的 div 元素中添加 md-ink-ripple 指令
2. 给你的 div 元素添加 ripple 类：

`

.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%;}
}

`

- Svetlana Rozhkova