CODEWITHSUNDEEP
githubpolymer-2.x
Nicolai Schmid
Nicolai Schmid

Reputation: 1092

webcomponents.org creating a demo for your element

quick question. When publishing an element to webcomponents.org, many elements have a nice demo, which you can open on the side and preview the element.

I created a demo for my element in demo/index.html but I can't figure out how to link this page properly for webcomponents.org to recognize.

I tried replicating the entire structure of the polymer/paper-button element, but it didn't work.

I'm using the Polymer 2.0 preview and the iron-demo-helpers to format the example.

Any ideas? Thanks!

Upvotes: 0

Views: 161

Answers (1)

daKmoR
daKmoR

Reputation: 1864

in your bower.json you can provide multiple demos via

"demos": {
    "Demo": "demo/index.html"
},

for the inline demo you can add something like this to your README.md

## Demo
<!---
```
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="grain-read-more.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<grain-read-more>
  <h3>Read More</h3>
  <div slot="more">
    The Content is only visible if grain-read-more is opened
  </div>
</grain-read-more>
```

Upvotes: 1

Related Questions