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

Answer 1

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

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

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>

如果您愿意，也可以将 font-weight 设置为 500 （这是默认 clickable-item 的样子）。

Answer 3

其他答案涵盖了大多数情况，但您也可以使用

自定义涟漪效果的颜色

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

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

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

Answer 4

实际上，缺乏相关文档。

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

您可以使用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本身或其中的子元素中。

preLink进程是一个包装器，使用＆＃34;非样式的＆＃34;执行＆＃34;代理＆＃34;的按钮点击，并在视觉上完成涟漪效应。

其他内容，如属性，也没有被转移到此代理＆＃34;，因此无法直接使用disabled，您需要模拟其结果。在我的例子中，我中断了ng-click操作，并将一个类放入元素中。

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>

Answer 6

这是最好的方法：

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

添加到您的div md-ink-ripple指令
将ripple类添加到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%;}
}

`

md-list上的角度材料设计波纹＆gt; MD-项目

6 个答案: