我将 Material Design 应用于一系列代表 sidenav 面板中链接的 div。
我的问题是波纹点击效果的应用范围太广,不仅影响了 div 的内容,还影响了它的父级 md-item-content
。 , 元素。
md-ink-ripple
属性被应用一次,作为 HTML 中的一个属性,如下所示。
我研究过 ripple 属性的位置,向上到它的祖父级 md-item
,向下到 child <label>
元素,似乎无论我把它放在哪里,它都会继续在相同的 md-item-content
中波动元素。
编辑- 我想我已经通过将目标标签切换为 md-item-content
解决了这个问题。 , 而不是 div
.留给子孙后代,任何感兴趣的人都可以捐出 2 美分。
<md-content>
<md-list>
<md-item ng-repeat="item in data.exhibits" id="toc-item-{{::$index}}">
<md-item-content>
<div class="toc-indices">
<span>{{::$index + 1}}</span>
</div>
<div class="md-tile-content exhibit-link" md-ink-ripple ng-click="goToSection($index, -1)" ng-class="{'md-item-active': (data.currentExhibitIndex === $index)}">
<label>{{::item.title}}</label>
</div>
</md-item-content>
<md-item-content ng-repeat="section in item.sections">
<label class="md-tile-content exhibit-section-link" ng-click="goToSection($parent.$index, $index)" id="toc-item-{{::$parent.$index}}-section-{{::$index}}" ng-class="{'md-item-active': (data.currentExhibitIndex === $parent.$index && data.sectionIndex === $index)}">
{{::section.title}}
</label>
</md-item-content>
<section class="clo-parts-divider"></section>
</md-item>
</md-list>
最佳答案
如果你像这样使 div 位置相对,
<div md-ink-ripple="#f5f5f5" style="position:relative"></div>
波纹将保留在 div 容器内。
- Source
关于angularjs - NgMaterial/Material Design 涟漪效应正在渗透边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29441670/