Question

这是我困扰的部分代码。

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

Answer 1

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

<!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>呢？听起来你复制了很多这样的功能，我不确定它有什么好处。

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

1 个答案: