聚合物凉亭组件纸卡不工作

Question

试图掌握 Polymer 和整个 Material 设计方面的事物。我在工作中使用过它并且它运行正常，但是当我试图在家里自己做事时它永远无法正常工作......即使我从 Polymer 本身安装示例，即：

polymer init polymer-1-application

例如，在标题中我给出了 paper-card 组件，但它似乎不起作用。我已经得到 app-header/app-toolbar 和运行但那是通过复制和粘贴其他代码。

请看下面的代码（我只包含重要的点点滴滴，请假设所有标签都是正确的）

index.html

<!doctype html>
<html>
<head>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="elements/newProj-header-bar.html">
  <link rel="import" href="elements/newProj-card.html">

  <style>/* CSS HERE */</style>
</head>
<body unresolved>

  <newProj-header-bar></newProj-header-bar>
  <newProj-card></newProj-card>

</body>
</html>

new-Poj-header-bar.html（包括所有代码）

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

<dom-module id="newProj-header-bar">
  <template>
    <style>
      :host {
        display: block;
        background: #115f9b;
        color: white;
      }
    </style>

       <app-header slot="header" reveals shadow effects="waterfall">
          <app-toolbar>
            <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
            <div main-title>Adam's App</div>
            <paper-icon-button icon="refresh"></paper-icon-button>
            <paper-icon-button icon="create"></paper-icon-button>
            <paper-icon-button icon="search"></paper-icon-button>
          </app-toolbar>
        </app-header>

  </template>

  <script>
    Polymer({

      is: 'newProj-header-bar',

      properties: {

      },

    });
  </script>
</dom-module>

newProj-card.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">

<link rel="import" href="../bower_components/paper-button/paper-button.html">

<link rel="import" href="../bower_components/paper-card/paper-card.html">

<dom-module id="newProj-card">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
       <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
          <div class="card-content">
            Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
          </div>
          <div class="card-actions">
            <paper-button>Share</paper-button>
            <paper-button>Explore!</paper-button>
          </div>
        </paper-card>

  </template>

  <script>
    Polymer({

      is: 'newProj-card',

      properties: {

      },

    });
  </script>

编辑 (14/06/17)

我按照 Pascal L 的建议将命名约定更改为没有任何大写字母，但仍然无法正常工作。我什至尝试使用 paper-material，但没有骰子。

我现在将向您展示 paper-card 的 bower.json，看看它是否与不兼容的版本有关或其他原因...

寻找我的 bower.json 文件我发现我有一个 "bower.json" 但还有一个 ".bower.json" 和标准“.gitignore”文件...虚线部分似乎有更多信息，但不确定发生了什么或为什么有两个文件...

paper-card/bower.json

{
  "name": "paper-card",
  "private": false,
  "main": "paper-card.html",
  "ignore": [
    "README.md"
    ],
  "dependencies": {
    "paper-shadow": "Polymer/paper-shadow#master",
    "paper-ripple": "Polymer/paper-ripple#master"
  }
}

.bower.json

{
  "name": "paper-card",
  "private": false,
  "main": "paper-card.html",
  "ignore": [
    "README.md"
  ],
  "dependencies": {
    "paper-shadow": "Polymer/paper-shadow#master",
    "paper-ripple": "Polymer/paper-ripple#master"
  },
  "homepage": "https://github.com/andytuwm/paper-card",
  "version": "0.1.5",
  "_release": "0.1.5",
  "_resolution": {
    "type": "version",
    "tag": "0.1.5",
    "commit": "092df7a4e6766a6acc26d42447811fcf2a844998"
  },
  "_source": "https://github.com/andytuwm/paper-card.git",
  "_target": "^0.1.5",
  "_originalSource": "paper-card",
  "_direct": true
}

Answer 1

您好，您必须将 newProj-card 组件重命名为 new-proj-card，因为 Html 不允许大写字母作为标签名称。

聚合物凉亭组件纸卡不工作

Polymer Bower Components Paper Card Not Working

html

polymer

material-design

paper-elements