聚合物1.0自定义元素使用纸-对话框-更好的方式做到这一点

Question

我有一个使用paper-dialog的自定义元素video-player。

他们现在的方式，似乎有点粗俗。我有一个外部按钮(它必须是一个外部按钮为我的设计)，打开它与:

bob = Polymer.dom(this.root).querySelector('video-player');
bob.querySelector('paper-dialog').open()

---

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="video-player">
  <template>
    <paper-dialog>
      <div class="layout horizontal">
        <paper-button dialog-dismiss>
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </div>
      <div style="height: 100%; width: 100%">
        <google-youtube style="height: 100%;"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="5"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      is: "video-player"
    });
  </script>
</dom-module>
</paper-dialog>

我不能继承paper-dialog的行为(这将是iron-overlay，因为它不会涉及到特定的paper-dialog元素。

既然这看起来有点粗糙，有没有更好的方法来做到这一点?

Answer 1

请阅读以下内容:

1。最后删除的

</paper-dialog>

2。add文件按钮组件

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

来源如下:

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="video-player">
  <template>
    <paper-dialog>
      <div class="layout horizontal">
        <paper-button dialog-dismiss>
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </div>
      <div style="height: 100%; width: 100%">
        <google-youtube style="height: 100%;"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="5"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      is: "video-player"
    });
  </script>
</dom-module>