UNPKG

3.94 kBMarkdownView Raw
1
2<!---
3
4This README is automatically generated from the comments in these files:
5demo-snippet.html url-bar.html
6
7Edit those files, and our readme bot will duplicate them over here!
8Edit this file, and the bot will squash your changes :)
9
10The bot does some handling of markdown. Please file a bug if it does the wrong
11thing! https://github.com/PolymerLabs/tedium/issues
12
13-->
14
15[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-demo-helpers.svg)](https://www.npmjs.com/package/@polymer/iron-demo-helpers)
16[![Build status](https://travis-ci.org/PolymerElements/iron-demo-helpers.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-demo-helpers)
17[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-demo-helpers)
18
19## &lt;demo-snippet&gt;
20
21`demo-snippet` is a helper element that displays the source of a code snippet and
22its rendered demo. It can be used for both native elements and
23Polymer elements.
24
25See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-demo-helpers),
26 [Demo](https://www.webcomponents.org/element/@polymer/iron-demo-helpers/demo/demo/index.html).
27
28## Usage
29
30### Installation
31```
32npm install --save @polymer/iron-demo-helpers
33```
34
35### In an html file
36```html
37<html>
38 <head>
39 <script type="module">
40 import '@polymer/iron-demo-helpers/demo-snippet.js';
41 import '@polymer/paper-checkbox/paper-checkbox.js';
42 </script>
43 </head>
44 <body>
45 <demo-snippet>
46 <template>
47 <input type="date">
48 <paper-checkbox>Checkbox</paper-checkbox>
49 </template>
50 </demo-snippet>
51 </body>
52</html>
53```
54
55### In a Polymer 3 element
56```js
57import {PolymerElement, html} from '@polymer/polymer';
58import '@polymer/iron-demo-helpers/demo-snippet.js';
59import '@polymer/paper-checkbox/paper-checkbox.js';
60
61class SampleElement extends PolymerElement {
62 static get template() {
63 return html`
64 <demo-snippet>
65 <template>
66 <input type="date">
67 <paper-checkbox>Checkbox</paper-checkbox>
68 </template>
69 </demo-snippet>
70 `;
71 }
72}
73customElements.define('sample-element', SampleElement);
74```
75
76## &lt;url-bar&gt;
77
78`url-bar` is a helper element that displays a simple read-only URL bar if
79and only if the page is in an iframe. In this way we can demo elements that
80deal with the URL in our iframe-based demo environments.
81
82If the page is not in an iframe, the url-bar element is not displayed.
83
84## Contributing
85If you want to send a PR to this element, here are
86the instructions for running the tests and demo locally:
87
88### Installation
89```sh
90git clone https://github.com/PolymerElements/iron-demo-helpers
91cd iron-demo-helpers
92npm install
93npm install -g polymer-cli
94```
95
96### Running the demo locally
97```sh
98polymer serve --npm
99open http://127.0.0.1:<port>/demo/
100```
101
102### Running the tests
103```sh
104polymer test --npm
105```
106
107## Known Issues
108If you add a `script type="module"` inside a `demo-snippet`, the demo will
109not be functional on non-module browsers (like IE11). If you need to
110use a `script type="module"` and want to display its code in the `demo-snippet`,
111a possible workaround is to duplicate the contents of the script outside of the
112`demo-snippet` -- that way `polymer serve` (or whatever solution you're using to
113ES5-ify the code) will convert the main document `module` to UMD, but will leave the
114displayed code untouched. Here is an example:
115
116```html
117<body>
118 <demo-snippet>
119 <template>
120 ...
121 <script type="module">
122 import {SomeExport} from '../foo.js';
123 SomeExport.aFunction();
124 </script>
125 </template>
126 </demo-snippet>
127
128 <!-- Hack: on non-module browsers the demo-snippet script doesn't
129 do anything, so add the content here again to make sure the demo works -->
130 <script type="module">
131 import {SomeExport} from '../foo.js';
132 SomeExport.aFunction();
133 </script>
134</body>
135```