@polymer/iron-demo-helpers NPM

<demo-snippet>

demo-snippet is a helper element that displays the source of a code snippet and its rendered demo. It can be used for both native elements and Polymer elements.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/iron-demo-helpers

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/iron-demo-helpers/demo-snippet.js';
      import '@polymer/paper-checkbox/paper-checkbox.js';
    </script>
  </head>
  <body>
    <demo-snippet>
      <template>
        <input type="date">
        <paper-checkbox>Checkbox</paper-checkbox>
      </template>
    </demo-snippet>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '@polymer/paper-checkbox/paper-checkbox.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <demo-snippet>
        <template>
          <input type="date">
          <paper-checkbox>Checkbox</paper-checkbox>
        </template>
      </demo-snippet>
    `;
  }
}
customElements.define('sample-element', SampleElement);

<url-bar>

url-bar is a helper element that displays a simple read-only URL bar if and only if the page is in an iframe. In this way we can demo elements that deal with the URL in our iframe-based demo environments.

If the page is not in an iframe, the url-bar element is not displayed.

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/iron-demo-helpers
cd iron-demo-helpers
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

Known Issues

If you add a script type="module" inside a demo-snippet, the demo will not be functional on non-module browsers (like IE11). If you need to use a script type="module" and want to display its code in the demo-snippet, a possible workaround is to duplicate the contents of the script outside of the demo-snippet -- that way polymer serve (or whatever solution you're using to ES5-ify the code) will convert the main document module to UMD, but will leave the displayed code untouched. Here is an example:

<body>
  <demo-snippet>
    <template>
      ...
      <script type="module">
        import {SomeExport} from '../foo.js';
        SomeExport.aFunction();
      </script>
    </template>
  </demo-snippet>

  <!-- Hack: on non-module browsers the demo-snippet script doesn't
    do anything, so add the content here again to make sure the demo works -->
  <script type="module">
    import {SomeExport} from '../foo.js';
    SomeExport.aFunction();
  </script>
</body>

web-components polymer demo

@polymer/polymer @polymer/paper-styles @polymer/prism-element @polymer/marked-element