6

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

在此处输入图像描述

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

我的示例代码如下。

索引.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>

我的列表.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>

将 index.html 中的 替换为 my-list.html 的部分标记内容（包括部分标记）时，涟漪效果可以正常工作。波纹中的 fit 属性也没有解决问题。我在自定义组件中缺少什么？

4

3 回答 3

7

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

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

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

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

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

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

此问题paper-ripple是由. 发生的事情是paper-ripple元素以my-list元素而不是其父paper-icon-item元素为目标。

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

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

    例如：

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

  1. 我已向包含此问题的修复程序的存储库提交了一个拉取请求。但是，目前它尚未合并。现在，您可以通过将文件中paper-ripple的版本设置为.paper-ripplebower.jsonvsimonian/paper-ripple#containment-fix

    如果您这样做，我强烈建议您密切关注问题并拉取请求，以便您可以在bower.json不再需要临时更改时恢复它们。

于 2015-06-04T01:07:41.790 回答
3

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

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

http://jsbin.com/zijumuhege/edit?html，输出

于 2015-06-17T10:41:52.843 回答
0

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

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

于 2015-06-03T23:12:56.337 回答