纸纹防止点击容器元素，不适合

这是部分代码，我很困扰。纸纹防止点击容器元素，不适合

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

预期的行为是纹波蔓延至核心图标按钮结束，只有这个元素，再加上，嗯，应该切换菜单抽屉。它确实工作没有波纹，但与它innit只是崩溃和烧伤。

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

编辑
代码工作：

<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就像一个魅力。

来源

2014-12-04 Caio Wilson

您使用的fit布局属性等同于使用top/right/bottom/left: 0设置position: absolute。如explained in the docs所示，这会调整元素的大小，以便使用position: relative集填充第一个父元素。既然你想它来填充你的<core-icon-button>，你可以设置该position: relative，如下图所示（使用relative属性，这是另一种快捷方式，聚合物定义）：

<!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>呢？听起来你正在复制很多功能，我不确定它的好处。

来源

2014-12-04 19:47:47

或者只是使用'relative'属性 – Pajn 2014-12-04 20:08:36

好点。调整来做到这一点。 – 2014-12-04 20:30:36

谢谢。它的效果比片段中的效果还要好。谢谢。我已经阅读过很多次文档，但是你可能知道它们总是在变化。 ps：你可以提高答案，这是相当丰富和有用的。我做到了。 – 2014-12-06 00:58:31

纸纹防止点击容器元素，不适合

回答

相关问题