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

Question

快速提问。发布元素到webcomponents.org时，很多元素都有一个不错的demo，可以在旁边打开预览元素。

我在 demo/index.html 中为我的元素创建了一个演示，但我不知道如何正确 link 此页面以便 webcomponents.org 识别。

我尝试复制 polymer/paper-button 元素的整个结构，但没有成功。

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

有什么想法吗？谢谢！

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

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

webcomponents.org creating a demo for your element

github

polymer-2.x