Question

我想创建自己的<menu-item>元素来删除一些样板代码。我用以下方式将<paper-icon-item>包装在我自己的元素中：

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-item/paper-icon-item.html">

<dom-module id="menu-item">
  <template>
    <paper-icon-item>
      <iron-icon icon="[[icon]]" item-icon></iron-icon>
      <content></content>
    </paper-icon-item>
  </template>
</dom-module>

<script>
  Polymer({
    is: "menu-item",
    properties: {
      icon: { type: String }
    }
  });
</script>

使用我的<menu-item>时的问题是，它的行为与直接在HTML文件中编写模板代码的行为不同。我怀疑该项目缺少一些与菜单正常运行的交互功能，但我无法弄清楚。我尝试使用行为Polymer.IronControlState和Polymer.IronButtonState，就像纸质项目一样，但没有运气。

我错过了什么让<menu-item>表现得像常规<paper-item>？

Answer 1

<强>答案

以下代码主要是从paper-icon-item.html复制的。

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-behaviors/iron-control-state.html">
<link rel="import" href="bower_components/iron-behaviors/iron-button-state.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/paper-styles/default-theme.html">
<link rel="import" href="bower_components/paper-item/paper-item-behavior.html">
<link rel="import" href="bower_components/paper-item/paper-item-shared-styles.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">

<dom-module id="menu-item">
  <template>
    <style include="paper-item-shared-styles"></style>
    <style>
      :host {
        @apply(--layout-horizontal);
        @apply(--layout-center);
        @apply(--paper-font-subhead);

        @apply(--paper-item);
        @apply(--paper-icon-item);
      }

      .content-icon {
        width: var(--paper-item-icon-width, 56px);
        @apply(--layout-horizontal);
        @apply(--layout-center);
      }
    </style>

    <div id="contentIcon" class="content-icon">
      <iron-icon icon="{{ico}}" item-icon></iron-icon>
    </div>
    <content></content>
  </template>

  <script>
    Polymer({
      is: 'menu-item',

      properties: {
        ico: {
          type: String,
          value: "icons:stars"
        }
      },

      behaviors: [
        Polymer.PaperItemBehavior
      ]
    });
  </script>
</dom-module>

关于扩展元素

我认为更改元素模板的最简单方法是复制它，修改模板及其名称。这种方法并非没有问题，要使新元素与原始元素的更新保持同步变得非常困难。我真的渴望更好的解决方案！。

使用行为

您应该尽量避免同时使用该元素使用的元素和行为，否则可能会遇到麻烦。例如，menu-item看起来不正确的原因是因为其中的paper-item未获取属性focused。 paper-item未获取该特定属性是因为其父元素menu-item具有焦点，menu-item具有焦点，因为menu-item和paper-item都{ {1}}设置它们。为什么这两个元素都设置在它们上面？这是因为它们都是tabindex="0"。

聚合物：在自己的元素中包装<paper-item>

1 个答案: