11

我有一个项目列表（每个项目都包含多个元素），其中每个项目都是可点击的并切换视图。有没有办法获得整体的连锁反应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}}">
                 ...
4

6 回答 6

31

如果要对特定元素使用涟漪效果，可以使用md-ink-ripple.

<div md-ink-ripple></div>
于 2015-03-03T10:55:32.003 回答
11

只需向元素添加一个md-ink-ripple指令和.md-clickable类：<md-list-item>

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

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

于 2015-06-24T19:12:45.170 回答
5

其他答案涵盖了大多数情况，但您也可以使用自定义波纹效果的颜色

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

这将产生浅蓝色的波纹颜色。

Angular Material 背后的团队希望保持这种内部并减少定制，这就是他们没有很好地记录它的原因。但是，我认为这是一个有用的自定义。希望能帮助到你！干杯!

于 2015-07-12T10:16:14.730 回答
2

实际上，这方面缺乏文档。

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

您可以使用md-list > md-list-item几个限制。在您的情况下，我们的想法是在 sidenav 上接近他们的文档菜单（他们的指令是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是唯一被接受在指令preLink函数内部执行流程的孩子。md-list-item

另一种方法是ng-click在其md-list-item自身或子元素中放置 a 。

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

其他的东西，比如属性，也没有被转移到这个“代理”，所以 adisabled不能直接使用，你需要模拟它的结果。就我而言，我中断了 ng-click 动作，并将一个类放入元素中。

于 2015-05-20T05:02:32.327 回答
0

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>
于 2015-03-07T04:58:58.660 回答
0

这是最好的方法：

<div md-ink-ripple class="ripple">Div like an md-button</div>
  1. 添加到您的 div md-ink-ripple 指令
  2. 将波纹类添加到您的 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%;}
}

`

于 2017-05-25T13:39:09.753 回答