文章/答案/技术大牛

发布

社区首页 >问答首页 >NgMaterial / Material Design Ripple effect正在渗透边缘

问NgMaterial / Material Design Ripple effect正在渗透边缘
EN

Stack Overflow用户

提问于 2015-04-04 09:06:08

回答 1查看 1K关注 0票数 3

我对一系列的div应用了材质设计，这些div代表了sidenav面板中的链接。

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

md-ink-ripple属性被应用一次，作为超文本标记语言中的属性，如下所示。

我处理了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>

angularjs

css

material-design

angular-material

回答 1

Stack Overflow用户

发布于 2016-06-07 16:26:59

如果将div的相对位置设置为如下所示，

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

涟漪将停留在div容器中。

-Source

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29441670

复制

相似问题

问NgMaterial / Material Design Ripple effect正在渗透边缘
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NgMaterial / Material Design Ripple effect正在渗透边缘EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NgMaterial / Material Design Ripple effect正在渗透边缘
EN