Question

我试图掌握Polymer 1.0版本，但我认为这将是一个简单的例子，事实证明并非如此。在经过几个小时的实验和阅读Polymer文档后，我不知道我是不是出了问题。

我想要做的是将Colpsing工具栏示例从GitHub上的robdobson转换为可在Polynmer 1.0下工作的内容。

以下是我的index.html文件中的代码正文

<collapse-toolbar query="(max-width: 500px)">
    <div class="logo">
        <a href="#">
            <iron-icon icon="polymer"></iron-icon>
        </a>
    </div>
        <paper-menu>
            <paper-item>Share</paper-item>
            <paper-item>Settings</paper-item>
            <paper-item>Help</paper-item>
        </paper-menu>
</collapse-toolbar>

以下是我的自定义元素（collapse-toolbar.html）文件中的代码：

    <dom-module id="collapse-toolbar">
    <template>
        <content select=".logo"></content>
            <template is="dom-if" if="{{smallScreen}}">
                <paper-menu-button>
                    <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <content select="paper-menu"></content>
                </paper-menu-button>
            </template>
            <template is="dom-if" if="{{!smallScreen}}">
                <content select="paper-menu"></content>
            </template>
        <iron-media-query query="{{query}}" query-matches="{{smallScreen}}"></iron-media-query>
    </template>
</dom-module>

    <script>
        Polymer({
            is: 'collapse-toolbar',
            properties: {
                query: String
            }
        });
    </script>

我在浏览器（Chrome）中运行此操作时看到的内容如下：如果我打开index.html文件，并将浏览器窗口设置为＆gt; 500px宽，我看到的是Polyer图标和纸质菜单，这正是我所期望的。

如果我将浏览器窗口的宽度减小到<500px，纸张菜单将消失，并在聚合物图标旁边显示汉堡包菜单。如果我点击汉堡菜单，会出现否下拉菜单。

如果我现在将窗口缩放回＆gt; 500px，则汉堡包菜单会消失，但我的普通纸质菜单不会再回来。

如果我开始使用＆lt; 500px的窗口加载页面，则会出现汉堡包菜单，但不会运行，当我将窗口展开到＆gt;时500px纸质菜单也不会出现。

希望有人能让我走上正轨。

Answer 1

在index.html内部，您应该使用<paper-menu class="dropdown-content">使下拉菜单生效。我仍然不知道如何在聚合物1.0中复制原始折叠工具栏的功能。

更新：放大窗口后，使用<template is="dom-if" if="{{!smallScreen}}" restamp="true">重新显示菜单。

自定义元素，折叠工具栏，无法按预期工作

1 个答案: