Ng材料/材料设计纹波效应通过边缘流血

问题描述：

我将材质设计应用于一系列代表sidenav面板中的链接的div。Ng材料/材料设计纹波效应通过边缘流血

我的问题是，波纹点击效果应用过于广泛，不仅击中了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>

答

如果你做的相对这样的DIV位置，

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

纹波会留在div容器内。

- Source

Ng材料/材料设计纹波效应通过边缘流血

相关推荐