paper-ripple 防止点击容器元素并且不适合答案

【问题标题】：paper-ripple prevents click on container element and doesn't fitpaper-ripple 防止点击容器元素并且不适合
【发布时间】：2014-12-04 15:57:35
【问题描述】：

这是我很困扰的部分代码。

<core-toolbar id="main-toolbar" horizontal layout>
    <core-icon-button icon="menu" class="bottom" core-drawer-toggle>
        <paper-ripple class="recenteringTouch" fit></paper-ripple>
    </core-icon-button>
    <div id="titulo" class="bottom" flex></div>
    <paper-fab id="viva-close-button" icon="close" class="bottom" mini></paper-fab>
</core-toolbar>

预期的行为是波纹一直蔓延到 core-icon-button 的末尾，并且只有这个元素，另外，它应该切换菜单抽屉。它确实在没有涟漪的情况下工作，但它开始只会崩溃和燃烧。

波纹在所有工具栏上都变长了，似乎也阻止了菜单图标接收点击事件并且不触发任何操作。
这一切也发生在菜单项上，但它们有点复杂（在我的至少是因为我扩展了它的功能）所以我决定尝试一下抽屉按钮。

编辑
代码工作：

    <paper-icon-button role="button" icon="menu" relative core-drawer-toggle>
      <paper-ripple class="recenteringTouch circle" fit></paper-ripple>
    </paper-icon-button>

绝对不需要摆弄。 peper-icon-button 就像一个魅力。

【问题讨论】：

标签： javascript polymer

【解决方案1】：

您使用的fit 布局属性等效于将position: absolute 设置为top/right/bottom/left: 0。与explained in the docs 一样，这会调整元素的大小，以便用position: relative 集填充第一个父元素。由于您希望它填充您的 <core-icon-button>，您可以在其上设置 position: relative，如下所示（使用 relative 属性，这是 Polymer 定义的另一个快捷方式）：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer Demo</title>
  </head>
  <body>
    <script src="//www.polymer-project.org/webcomponents.js"></script>
    <link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
    <link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
    <link rel="import" href="//www.polymer-project.org/components/core-icon-button/core-icon-button.html">
    
    <template is="auto-binding">
      Positioned:
      <core-icon-button relative icon="menu" on-tap="{{alertTap}}">
        <paper-ripple fit></paper-ripple>
      </core-icon-button>
    </template>
    
    <script>
      document.querySelector('template').alertTap = function(e) {
        console.log('Tapped!', e);
      };
    </script>
  </body>
</html>

此示例还显示了通过 <core-icon-button> 上的处理程序处理 tap 事件。

但是...为什么不直接使用<paper-icon-button> 呢？听起来你复制了很多这样的功能，我不确定有什么好处。

【讨论】：

或者只使用relative属性
谢谢。它比在 sn-p 中工作得更好。谢谢你。我已经阅读了很多次文档，但您可能知道它们总是在变化。 ps.：你 2 可以投票赞成答案，它非常有用和有用。我做到了。
不确定它为什么停止工作。我不得不将核心抽屉开关移动到纸波纹本身：/
抱歉@JeffPosnick，没有注意到您对 peper-icon-button 的建议。它工作得很好，我来这里是为了建议并意识到你已经这样做了。谢谢你。再次。