webcomponents.org为您的元素创建演示

时间:2017-04-29 14:11:48

标签: github polymer-2.x

快速提问。将元素发布到webcomponents.org时,许多元素都有一个很好的演示,你可以在侧面打开并预览元素。

我在demo / index.html中为我的元素创建了一个演示,但我无法弄清楚如何正确链接此页面以便webcomponents.org识别。

我尝试复制聚合物/纸质按钮元素的整个结构,但它没有用。

我正在使用Polymer 2.0预览版和iron-demo-helpers来格式化该示例。

有什么想法吗? 谢谢!

1 个答案:

答案 0 :(得分:1)

在您的bower.json中,您可以通过

提供多个演示
"demos": {
    "Demo": "demo/index.html"
},

对于内联演示,您可以在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>
```