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版本的聚合物，所以我想我是最新版本。

任何帮助都将不胜感激。

Answer 1

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

<!-- 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">

Polymer input-header元素没有预期的行为

1 个答案: