I heard about Google Polymer and decided to try it out. I have had some trouble loading the components properly. It does not seem that my elements have any colors or anything.
When I download the Starter Kit 1.0 from Google Polymer website, then it appears like this.
But when I try to import to my own project it appears like this (The functionality works)
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>DueDay</title>
<!-- Google Fonts -->
<link rel="stylesheet" href="http://ift.tt/2aTT5TI">
<!-- Web Components -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- Paper Elements -->
<link rel="import" href="bower_components/paper-elements/paper-elements.html">
<!-- Iron Elements -->
<link rel="import" href="bower_components/iron-elements/iron-elements.html">
<!-- App Layout -->
<link rel="import" href="bower_components/app-layout/app-layout.html">
<!-- Stylesheet -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<app-header reveals>
<app-toolbar>
<paper-icon-button icon="search"></paper-icon-button>
<div id="title" main-title>Tasks</div>
<paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
</app-toolbar>
</app-header>
<app-drawer id="drawer" align="end" swipe-open>
<paper-menu class="drawer-menu">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</app-drawer>
</body>
</html>
Here is my bower.json file
{
"name": "DueDay",
"description": "A simple to-do application",
"main": "index.html",
"authors": [
"John Doe"
],
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.7.1",
"paper-elements": "PolymerElements/paper-elements#^1.0.7",
"iron-elements": "PolymerElements/iron-elements#^1.0.10",
"app-layout": "PolymerElements/app-layout#^0.10.6"
}
}
Can someone tell me why my components are not showing corretly?
Browser: Google Chrome Version 55.0.2883.95 (64-bit)
Any help are appreciated! Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire