Question

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

enter image description here

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

我的示例代码如下。

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

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>

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

Answer 1

注意：如果您遇到此行为或类似行为，请在最新版本的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于11月发布2015年6月，其中包含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元素。

目前有两种解决方法：

在此期间，创建一个自定义元素，在其阴影/阴影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，其中包含针对此问题的修复程序。但是，目前尚未合并。目前，您可以通过将paper-ripple文件中的paper-ripple版本设置为bower.json，告诉bower安装vsimonian/paper-ripple#containment-fix的修补副本。

如果您这样做，我强烈建议您密切关注issue和pull request，以便在bower.json不再需要时可以还原临时更改。< / p>

Answer 2

可能注意到 - 作为潜在的问题 - 将波纹容器元素设置为(defhydra hydra-zoom (global-map "<f2>") "zoom" ("<kp-add>" text-scale-increase "in") ("+" text-scale-increase "in") ("-" text-scale-decrease "out") ("<kp-subtract>" text-scale-decrease "out") ("0" (text-scale-set 0) "reset") ("<kp-0>" (text-scale-set 0) "reset"))

非常重要

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

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

Answer 3

my-list.html中缺少开头<style>标记。

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

聚合物1.0 - 纸张波纹遍布整个屏幕而非适合元素

3 个答案: