这是我遇到问题的部分代码。
<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>
预期的行为是涟漪传播到核心图标按钮的末尾，并且只有这个元素，另外，它应该切换菜单抽屉。它确实可以在没有纹波的情况下工作，但如果有纹波，它只会崩溃并烧毁。
波纹会贯穿所有工具栏，并且似乎还会阻止菜单图标接收单击事件，并且不会触发任何操作。
这一切也发生在菜单项上，但它们有点复杂(在我的情况至少是因为我扩展了它的功能)所以我决定尝试一下抽屉按钮。
编辑
代码工作:
<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 的作用就像一个魅力。
最佳答案
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>此示例还显示了处理 tap通过 <core-icon-button> 上的处理程序进行事件.
但是...为什么不直接使用 <paper-icon-button> 反而？听起来您正在复制很多功能，但我不确定这样做有什么好处。
关于javascript - 纸波纹阻止点击容器元素并且不适合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27298365/