Polymer 聚合物1.0-纸张波纹遍布整个屏幕，而不是适合元件_Polymer_Polymer 1.0

Polymer 聚合物1.0-纸张波纹遍布整个屏幕，而不是适合元件

polymer

Polymer 聚合物1.0-纸张波纹遍布整个屏幕，而不是适合元件,polymer,polymer-1.0,Polymer,Polymer 1.0,我试图在可点击的项目列表上使用涟漪效应，但我面临的问题是，当我将列表封装到自定义元素中时，涟漪效应会遍布整个屏幕。如果我把它放在index.html中，效果会很好，但是当我创建一个包含在其中的自定义元素时失败了。查看问题的图像：我读过类似的问题，答案是使容器相对，这应该已经完成了。所以我想知道当使用自定义元素的涟漪效应时，是否需要在主机中设置任何特殊属性我的示例代码如下 Index.html <!doctype html> <html lang=""> <h

我试图在可点击的项目列表上使用涟漪效应，但我面临的问题是，当我将列表封装到自定义元素中时，涟漪效应会遍布整个屏幕。如果我把它放在index.html中，效果会很好，但是当我创建一个包含在其中的自定义元素时失败了。查看问题的图像：

我读过类似的问题，答案是使容器相对，这应该已经完成了。所以我想知道当使用自定义元素的涟漪效应时，是否需要在主机中设置任何特殊属性

我的示例代码如下

Index.html

<!doctype html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>List test</title>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="elements/elements.html"> 
  <style>
    paper-icon-item {
      position: relative;
      height: 48px;
    }
  </style>
</head>
<body unresolved class="fullbleed layout vertical">
  <template is="dom-bind" id="app">
        <my-list></my-list>
  </template>
  <script src="scripts/app.js"></script>
</body>
</html>


列表测试
纸张图标项目{
位置：相对位置；
高度：48px；
}

my-list.html

<dom-module id="my-list">
    <style>
      paper-icon-item {
        position: relative;
        height: 48px;
      }
    </style>
  <template>
  <section>
    <div class="menu">
      <paper-icon-item>
        <div class="label" fit>Mark as unread</div>
        <paper-ripple></paper-ripple>
      </paper-icon-item>
      <paper-icon-item>
        <div class="label" fit>Mark as important</div>
        <paper-ripple></paper-ripple>
      </paper-icon-item>
      <paper-icon-item>
        <div class="label" fit>Add to Tasks</div>
        <paper-ripple></paper-ripple>
      </paper-icon-item>
      <paper-icon-item>
        <div class="label" fit>Create event</div>
        <paper-ripple></paper-ripple>
      </paper-icon-item>
    </div>
  </section>
  </template>

</dom-module>
<script>
    (function () {
      Polymer({
        is: 'my-list'
      });
    })();
</script>


纸张图标项目{
位置：相对位置；
高度：48px；
}
标记为未读
标记为重要
添加到任务中
创建事件
（功能（）{
聚合物({
是：“我的名单”
});
})();

当用my-list.html的节标记内容（包括节标记）替换index.html中的时，涟漪效应很好。ripple中的fit属性也不能解决问题。自定义组件中缺少什么？

my-list.html中缺少开头的

标记

似乎触发

元素上的涟漪效应也会触发该自定义元素中所有其他

元素上的涟漪效应。为项目创建自定义元素或将所有内容移到自定义元素之外似乎可以解决我的问题。

注意：如果您在最新版本的

paper ripple

中遇到这种行为或类似行为，此答案解决的问题可能不是您遇到的问题（请参阅下面的更新）

paper ripple

具有以下CSS（仅显示相关行）：

：主机{
显示：块；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}

如果

纸张波纹

的父元素没有设置

位置：相对

，这将导致波纹填充它找到的第一个

位置：相对

父元素，该父元素可能不是它的直接父元素，也可能不是整个文档，以先到者为准

要解决此问题，请确保您在中使用的元素在其CSS中具有

位置：相对
更新（2015年6月15日）：paper ripple
1.0.1于2015年6月11日发布，其中包括，将此答案中建议的修复方案作废。只需更新bower.json
即可绑定到聚合关系/paper ripple.^1.0.1


这个问题是由以下原因引起的。发生的情况是，paper-ripple
元素的目标是my-list
元素，而不是它们的父paper-icon项
元素
目前有两种方法可以解决此问题：
同时，创建一个自定义元素，该元素在其shady/shadow DOM中具有paper-ripple
元素，并调整其大小以适合您的元素
例如：

：主持人{
显示：块；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
聚合物（{is:'波纹包装器'}）；

我已向存储库提交了一个包含此问题修复程序的。然而，目前它还没有被合并。现在，您可以通过将bower.json
文件中的paper-ripple
版本设置为vsimonian/paper-ripple.#containment fix
来告诉bower安装带补丁的paper-ripple

如果您这样做，我强烈建议您密切关注和，以便在不再需要时恢复bower.json
中的临时更改
可能需要注意的是，作为一个潜在的问题，将ripple容器元素设置为position:relative是很重要的
我想知道为什么涟漪填充根容器，尽管已经定义了我的框大小
我将paper ripple更新为1.0.1版本，但它没有解决这个问题issue@WaleedAsenderOP遇到的问题与你遇到的问题不同。正如@zerodevx提到的，如果位置：绝对元素延伸到顶部：0；左：0；底部：0；右：0，例如ripple，不在位置：relative
容器中，那么它将填充窗口而不是其父元素。这导致了一个类似的问题，但正如你所指出的，它确实不同于我用我的答案解决的问题。我会继续更新答案，因为这个错误已经被修补了很久，对于任何遇到这个问题的人来说。@kctang，很好的回答！我真的写了display:relative
？？！谢谢你的编辑！：）