Skip to content

PolymerElements/iron-demo-helpers

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Elliott Marquez
Mar 5, 2019
65e87e8 · Mar 5, 2019
Aug 23, 2018
Jul 10, 2018
Jul 10, 2018
Aug 16, 2018
Aug 16, 2018
Sep 7, 2018
May 17, 2016
Jul 11, 2018
Sep 14, 2018
Jul 11, 2018
Mar 5, 2019
Aug 8, 2018
Jun 23, 2018
Mar 5, 2019
Mar 5, 2019
Jul 10, 2018
Jun 5, 2018

Repository files navigation

Published on NPM Build status Published on webcomponents.org

<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>