javascript - polymer 输入 header 元素没有预期的行为

Question

我按照以下视频中的步骤操作 https://www.youtube.com/watch?v=ZDjiUmx51y8并创建了我的自定义输入标题 polymer 元素，如下所示

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="input-header">

  <template>

    <style>
      .dropdown-content {
        padding: 0px;
      }
    </style>

    <paper-toolbar>

      <paper-icon-button icon="mail"></paper-icon-button>

      <div class="title">{{label}}</div>

      <paper-menu-button horizontal-align="right" vertical-align="top">
        <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
        <div class="dropdown-content">
          <paper-input label="Thread name:" value="{{label}}"></paper-input>
        </div>
      </paper-menu-button>
    </paper-toolbar>

  </template>

  <script>
    Polymer({

      is: 'input-header',

      properties: {

        label: {
          type: String,
          notify: true
        }

      }

    });
  </script>

</dom-module>

然后我在我的index.html中调用它，如下所示

      <input-header label="{{label}}"></input-header>

但我没有得到视频中显示的行为

https://www.youtube.com/watch?v=ZDjiUmx51y8

当他单击菜单按钮时，输入字段出现的位置。

事实上，当我点击菜单按钮时什么也没有发生。

我使用的是 1.2.1 版本的 polymer ，所以我认为我使用的是最新版本。

如有任何帮助，我们将不胜感激。

Answer 1

正如 @GunterZochbauer 指出的，这个问题是通过导入 input-header 中使用的 elements.html 中的 paper 元素来解决的，如下所示

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">