Question

我将材质设计应用于一系列div，它们代表sidenav面板中的链接。

我的问题是涟漪点击效果的应用过于宽泛，不仅会影响div的内容，还会触及其父级md-item-content元素。

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

我已经玩过ripple属性的位置，向上到祖父母，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容器内。

- Source

NgMaterial / Material Design涟漪效应正在逐渐消失

1 个答案: