NgMaterial / Material Design 波纹效果正在边缘渗出

Question

我将材料设计应用于一系列代表侧边导航面板中的链接的 div。

我的问题是涟漪点击效果的应用范围太广，不仅影响 div 的内容，还影响其父md-item-content元素。

md-ink-ripple 属性被应用一次，作为 HTML 中的一个属性，如下所示。

我已经处理了涟漪属性的位置，向上到其祖父元素，md-item向下到子<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>

Answer 1

如果你像这样使 div 位置相对，

<div md-ink-ripple="#f5f5f5" style="position:relative"></div>

涟漪将留在 div 容器内。

-来源