Polymer 1.0 Custom Element Using paper-dialog- better way to do this? -
i have custom element video-player
uses paper-dialog
.
they way now, seems kind of hacky. have external button(it has external button design) opens with:
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>
i can not inherit paper-dialog
behavior(which iron-overlay
because won't relate specific paper-dialog
element.
since seems kind of hacky, there better way this?
please read follows:
1.the last deleted
</paper-dialog>
2.paper-button component add
<link rel="import" href="../bower_components/paper-button/paper-button.html">
sources follows:
<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>
Comments
Post a Comment