Polymer 1.0 - 纸波纹遍布整个屏幕而不是适合元素

Question

我试图在可点击的项目列表上使用涟漪效应，但我遇到了一个问题，即当我将该列表封装到自定义元素中时，涟漪效应遍布整个屏幕。如果我将它放在我的 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>

我的-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>

当用my-list.html的节标签内容（包括节标签）替换index.html中的时，涟漪效果很好。波纹中的拟合属性也没有解决问题。我在自定义组件中缺少什么？

Answer 1

我的 list.html 中缺少起始 <style> 标签。

似乎在 <paper-ripple> 元素上触发涟漪效应也会在该自定义元素内的所有其他 <paper-ripple> 元素上触发它。为项目创建自定义元素或将所有内容移到自定义元素之外似乎可以解决我的问题。

Answer 2

注意： 如果您在最新版本的 paper-ripple 中遇到此行为或类似行为，则很可能是此答案的问题地址不是您遇到的问题（请参阅下面的更新）。

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

:host {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

如果 paper-ripple 的父元素没有设置 position: relative，这将导致波纹填充它找到的第一个 position: relative 父元素，这可能不是它的直接父级或整个文档，以先到者为准。

要解决此问题，请确保您在 paper-ripple 中使用的元素在其 CSS 中具有 position: relative。

更新 （2015 年 6 月 15 日）: paper-ripple 1.0.1于 2015 年 6 月 11 日发布，其中包括 the PR fixing this problem，使此答案中推荐的修复 过时。 只需更新 bower.json 绑定到 PolymerElements/paper-ripple#^1.0.1.

此问题是由 a current issue with paper-ripple 引起的。发生的情况是 paper-ripple 元素以 my-list 元素为目标，而不是它们的父 paper-icon-item 元素。

目前有两种方法可以解决这个问题：

同时，创建一个自定义元素，在其 shady/shadow DOM 中包含一个 paper-ripple 元素，并调整其大小以适合您的元素。

例如：

<dom-module id="ripple-wrapper">
  <style is="custom-style">
    :host {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
  <template>
    <paper-ripple></paper-ripple>
  </template>
</dom-module>
<script>
  Polymer({ is: 'ripple-wrapper' });
</script>

我已经向存储库提交了 pull request，其中包含针对此问题的修复程序。然而，目前它还没有被合并。现在，您可以通过将 bower.json 文件中 paper-ripple 的版本设置为 vsimonian/paper-ripple#containment-fix.
来告诉 Bower 安装 paper-ripple 的补丁副本
如果您这样做，我强烈建议您密切关注问题和 pull request 以便您可以恢复 bower.json 中的临时更改当不再需要它们时。

Answer 3

可能需要注意的是 - 作为一个潜在的问题 - 将波纹容器元素设置为 position: relative;

很重要

我想知道为什么已经定义了我的盒子尺寸但涟漪会填满根容器。

http://jsbin.com/zijumuhege/edit?html,output

Polymer 1.0 - 纸波纹遍布整个屏幕而不是适合元素

Polymer 1.0 - paper-ripple goes all over the screen instead fit in the element

polymer

polymer-1.0