聚合物 |如何在铁组件页面上加载多个来源？答案

【问题标题】：Polymer | How to load Multiple sources on iron-component-page?聚合物 |如何在铁组件页面上加载多个来源？
【发布时间】：2016-03-16 10:58:42
【问题描述】：

我们可以在 Iron-component-page 上加载多个源来生成演示 DOCS。例如：

<iron-component-page sources='["page1.html", "page2.html","page3.html"]'></iron-component-page>

提前致谢。

【问题讨论】：

标签： angularjs model-view-controller backbone.js polymer web-component

【解决方案1】：

创建一个文件all-imports.html，然后在index.html文件的src属性中使用

all-imports.html

<link rel="import" href="page1.html">
<link rel="import" href="page2.html">
<link rel="import" href="page3.html">

index.html

<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>paper-input</title>

  <script src="<>/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="<>/iron-component-page/iron-component-page.html">

</head>
<body>

  <iron-component-page src="all-imports.html"></iron-component-page>

</body>
</html>

【讨论】：

一件事是我现在有多个文档 - 演示页面不会出现在我的行为元素中。有什么我可能会在这里遗漏的吗？
@DavidDouglas ，您可以在 中指定演示的位置。所以它看起来像。您可以在每个导入的组件文件中执行此操作。 <iron-component-page> 将拿起 @ 符号并发挥它的魔力。
特别是@demo html 注释。还有一些@ cmets 需要注意，它们也有不同的魔法。查看 Polymer 网站上的“编写元素文档”部分。 polymer-project.org/1.0/docs/tools/… ...另一个很棒的资源是这个文档风格指南：polymerelements.github.io/style-guide

【解决方案2】：

从“components/paper-input”包中获取灵感，其中包含“paper-input”元素，但也包含“paper-input-container”、“paper-input-behavior”...。

您必须将所需的sources='["page1.html", "page2.html","page3.html"]' 替换为有据可查的src 属性，以这种方式引用全新文件all-imports.html

yourpage.html

    ...
    <link rel="import" href="../iron-component-page/iron-component-page.html">
    </head>
    <body>
    ...
      <iron-component-page src="all-imports.html"></iron-component-page>
    ...

因此通过单行链接文件引用您的 ["page1.html", "page2.html","page3.html"] 源数组

all-imports.html

    <link rel="import" href="page1.html">
    <link rel="import" href="page2.html">
    <link rel="import" href="page3.html">

与 Srik 所写的类似。

注意：左上角元素下拉菜单，也可能会出现页面子元素文档（在任何地方）..

【讨论】：