我有一个项目列表(每个项目都包括多个元素),每个项目都可以点击并切换视图。有没有办法在整个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}}">
...
如果要在特定元素上使用波纹效果,可以使用md-ink-ripple
。
<div md-ink-ripple></div>
只需向<md-list-item>
元素添加md墨迹波纹指令和.md可点击类:
<md-list-item md-ink-ripple class="md-clickable">
<p>Foo</p>
</md-list-item>
如果愿意,您还可以将字体大小设置为500(这就是默认可点击项目的外观)。
其他答案涵盖了大多数情况,但您也可以使用自定义波纹效果的颜色
<md-list-item md-ink-ripple="#03A9F4">
<p></p>
</md-list-item>
这将产生浅蓝色波纹颜色。
Angular Material背后的团队希望将其保留在内部并减少定制,这就是为什么他们没有很好地记录它的原因。然而,我认为这是一个有用的定制。希望它能有所帮助!干杯
实际上,这方面缺乏文档。
我在寻找解决方案,在这里找到了你的问题,所以我去查看了他们的源代码。
使用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-list-item
指令的preLink
函数中,md-checkbox
和md-switch
是唯一被接受执行进程的子级。
另一种方法是将ng-click
放在md-list-item
本身上,或者放在它内部的子元素中
preLink
过程是一个包装器,使用一个"非样式"按钮在点击时执行"代理",并在视觉上简化波纹效应。
其他东西,比如属性,也没有被传输到这个"代理",所以disabled
不能直接使用,你需要模拟它的结果。在我的例子中,我中断ng点击操作,并将一个类放入元素中。
如果您想要波纹而不是anchor
,我建议使用md-button
。然后只需在控制器中更改ui路由器状态即可。
请参阅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>
这里是最好的方法:
<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%;}
}
`