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

本文介绍了聚合物1.0-纸波纹遍布整个屏幕，而不是适合元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在可单击的项目列表上使用波纹效果，但是当我将该列表封装到自定义元素中时，我面临着波纹效果遍及整个屏幕的问题.如果将其放在index.html中，它会很好用，但是当我创建包含在其中的自定义元素时，它会失败.看到问题的图片:

I'm trying to use the ripple effect on a clickable list of items but I'm facing the issue that the ripple effect goes all over the screen when I encapsulate that list into a custom element. It works great if I place it in my index.html but fails when I create a custom element that is included there. See an image of the issue:

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

I've been reading similar questions where the answer is to make the container relative, which should be already done. So I'm wondering if it is required to set any special attribute in the host when using the ripple effect from a custom element.

我的示例代码如下.

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中的时，波纹效果很好.涟漪中的fit属性也不能解决问题.我在自定义组件中缺少什么?

When replacing the in the index.html by the section tag content (the section tag included) of my-list.html, the ripple effect works fine. The fit property in the ripple didn't solve the problem either. What am I missing in the custom component?

推荐答案

注意::如果您在最新版本的paper-ripple中遇到此行为或与之类似的行为，则为此答案可能解决的问题可能不是您遇到的问题(请参见下面的更新).

NOTE: If you are experiencing this behaviour, or behaviour similar to it, in the latest version of paper-ripple, it is likely that the problem that this answer addresses is not the problem you are experiencing (see update below).

paper-ripple具有以下CSS(仅显示相关行):

paper-ripple has the following CSS (only relevant lines shown):

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

如果paper-ripple的父元素未设置position: relative，这将导致波动填充它找到的第一个position: relative父元素，该父元素可能不是其直接父元素，也可能不是整个文档，以先到者为准.

If the paper-ripple's parent element does not have position: relative set, this will result in the ripple filling the first position: relative parent that it finds, which may not be its immediate parent, or the whole document, whichever comes first.

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

To fix this, make sure that the element you are using paper-ripple in has position: relative in its CSS.

更新 (2015年6月15日) : paper-ripple 1.0.1已于2015年6月11日发布，其中包括解决此问题的PR ，使此答案中建议的修复 已过时. 只需更新bower.json即可绑定到PolymerElements/paper-ripple#^1.0.1.

UPDATE (15 June 2015): paper-ripple 1.0.1 was released on 11 June 2015, which includes the PR fixing this problem, making the fixes recommended in this answer obsolete. Simply update bower.json to bind to PolymerElements/paper-ripple#^1.0.1.

此问题是由当前与paper-ripple 有关的问题引起的.发生的情况是paper-ripple元素的目标是my-list元素，而不是其父级paper-icon-item元素.

This problem is caused by a current issue with paper-ripple. What is happening is that the paper-ripple elements are targeting the my-list element instead of their parent paper-icon-item element.

目前有两种方法可以解决此问题:

There are currently two ways to fix this:

与此同时，创建一个自定义元素，该元素的阴影/阴影DOM中有一个paper-ripple元素，并调整其大小以适合您的元素.

In the meantime, create a custom element that has a paper-ripple element in its shady/shadow DOM, and size it to fit your element.

例如:

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

我已向包含以下内容的存储库提交了拉动请求解决此问题的方法.但是，目前尚未将其合并.现在，您可以通过将bower.json文件中的paper-ripple版本设置为vsimonian/paper-ripple#containment-fix来告诉Bower安装paper-ripple的修补程序副本.

I have submitted a pull request to the repository that contains a fix for this problem. Currently, however, it hasn't been merged yet. For now, you can tell bower to install the patched copy of paper-ripple by setting the version of paper-ripple in your bower.json file to vsimonian/paper-ripple#containment-fix.

如果这样做，我强烈建议您在问题和拉动请求，这样，当出现以下情况时，您可以还原bower.json中的临时更改不再需要它们.

If you do this, I highly recommend that you keep tabs on the issue and pull request so that you may revert the temporary changes in bower.json when they are no longer needed.

这篇关于聚合物1.0-纸波纹遍布整个屏幕，而不是适合元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Ripple