Trying to get to grips with Polymer and the whole Material Design side of things. I have used this at work and it runs correctly, however when I am attempting to do things on my own at home it never works properly... Even if I am installing the examples from Polymer themselves, ie:
polymer init polymer-1-application
For example in the title I have given the paper-card component which just doesn't seem to work. I have gotten the app-header/app-toolbar up and running but that was by copying and pasting other code in.
Please see code below (I am only going to include the important bits and pieces, please assume all of the tags are correct)
<!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>
<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>
<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>
I changed the naming conventions to not have any capital letters as Pascal L suggested, however things still aren't working. I even tried with using paper-material, but no dice.
I will now show you the bower.json for paper-card to see if it something to do with incompatible versions or something...
Looking for my bower.json file I found that I have a "bower.json" but also a ".bower.json" along with the standard ".gitignore" file... the dotted one seems to have a bit more info, but not sure what is going on or why two files...
{
"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"
}
}
{
"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
}
Hi you must rename your newProj-card Component to new-proj-card since Html does not allow uppercase letters as tag names.