polymer-1.0 - 自定义元素，折叠工具栏，不按预期工作

Question

我正试图掌握 Polymer 1.0 版，但我认为简单的示例结果并非如此。经过几个小时的试验并阅读了 Polymer 文档后，我不知道我哪里出错了。

我试图做的是将折叠工具栏示例从 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 文件并将我的浏览器窗口设置为 > 500 像素宽，我看到的是 Polyer 图标和纸质菜单，这正是我所期望的。

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

如果我现在将窗口缩放回 >500px，汉堡包菜单就会消失，但我的常规纸质菜单不会出现。

如果我加载页面时窗口开始时 <500 像素，汉堡菜单会出现，但不会运行，当我将窗口扩展到 > 500 像素时，纸质菜单也不会出现。

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

Answer 1

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

更新:使用 <template is="dom-if" if="{{!smallScreen}}" restamp="true">使菜单在放大窗口后重新出现。