Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
​
  <base href="http://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer-element.html">
  <link rel="import" href="paper-dialog/paper-dialog.html">
  
  <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
  <link rel="import" href="neon-animation/web-animations.html">
  <link rel="import" href="neon-animation/animations/scale-up-animation.html">
  <link rel="import" href="neon-animation/animations/fade-out-animation.html">
​
</head>
<body>
  <dom-module id="my-el">
    <template>
      <button on-click="open">Open Dialog</button>
      <paper-dialog
        id="dialog"
        entry-animation="scale-up-animation"
        exit-animation="fade-out-animation"
        modal
       >
        <h2>Header</h2>
        <div>Dialog body</div>
      </paper-dialog>
    </template>
    <script>
      class MyEl extends Polymer.Element {
        static get is() { return 'my-el' }
      
    constructor() {
      super();
        }
​
        open() {
          console.log('opening...');
          this.$.dialog.open();
          console.log('opened!');
        }
​
      }
​
      customElements.define(MyEl.is, MyEl);
    </script>
  </dom-module>
  
  <my-el></my-el>
</body>
</html>
​
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers