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

【问题标题】：Custom element, collapsing toolbar, not working as desired自定义元素，折叠工具栏，无法按预期工作
【发布时间】：2015-07-26 04:22:01
【问题描述】：

我正在尝试使用 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) 中运行此程序时看到的内容如下：如果我在浏览器窗口设置为 > 500px 宽的情况下打开 index.html 文件，我看到的是 Polyer 图标和纸质菜单，这正是我所期望的。

如果我将浏览器窗口的宽度减小到 NO会出现下拉菜单。

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

如果我以 500px 时，纸质菜单也不会出现。

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

【问题讨论】：

标签： polymer-1.0

【解决方案1】：

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

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

【讨论】：