Question

我想创建一个基于＆＃39;纸张按钮的高级按钮。但是，如果我只是这样做

<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<dom-module id="my-better-button">
  <script>
    Polymer({
      is: 'my-better-button',
      extends: 'paper-button'
    });
  </script>
</dom-module>

然后按钮丢失了所有样式。我做错了吗？

我正在使用Polymer 1.0。

Answer 1

要创建自己的元素，使用其他自定义元素，例如paper-button，您需要创建一个包装器。

<dom-module id="my-button">
  <template>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
</dom-module>

这样一旦你使用<my-button>Tap Me</my-button>，它就会真正地将一个纸质按钮包裹在我的按钮中。

一个很好的例子是paper-input，它基本上是iron-input的包装器。看看它，看看如何传递属性。

Answer 2

您可以通过Behaviors扩展自定义元素，如下所示：

<dom-module id="my-better-button">
  <script>
    Polymer({
      is: 'my-better-button',
      behaviors: [betterButton]
    });
  </script>
</dom-module>

行为就像Mixins，所以它们基本上是一个Javascript对象。行为可以定义生命周期回调，声明的属性，默认属性，观察者和侦听器。

我建议您观看有关此主题的精彩视频，该视频可以很好地解释如何使用它：https://www.youtube.com/watch?v=YrlmieL3Z0k

是否有可能扩展Polymer元素并重用其风格？

2 个答案: