I searched many tutorials and all documentation about App router, I have tried the guide at https://erikringsmuth.github.io/app-router/ but I do not understand how I can load an HTML page inside a div, without the other reloaded. I know this is make it with AJAX, but with polymer that is different, how could do ?. This is the code for my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-ajax/iron-request.html">
<link rel="import" href="bower_components/app-router/app-router.html">
<link rel="import" href="bower_components/pushstate-anchor/pushstate-anchor.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Reino Unido</title>
</head>
<body>
<paper-drawer-panel>
<div drawer class="menu">
<paper-toolbar class="drawer">
<span>Reino Unido</span>
</paper-toolbar>
<paper-menu class="list">
<paper-item>
<iron-icon icon="home"></iron-icon><span class="Menu">Inicio</span></paper-item>
<paper-item>
<iron-icon icon="shopping-cart"></iron-icon><span class="Menu">Catálogo</span></paper-item>
<paper-item>
<iron-icon icon="star"></iron-icon><span class="Menu">Promociones</span></paper-item>
<paper-item>
<iron-icon icon="drafts"></iron-icon><span class="Menu">Contáctanos</span></paper-item>
<paper-item>
<iron-icon icon="info"></iron-icon><span class="Menu">Acerca de</span></paper-item>
</paper-menu>
</div>
<div main class="page">
<paper-toolbar class="main">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<span title class="flex">Inicio</span>
<paper-icon-button icon="refresh"></paper-icon-button>
</paper-toolbar>
<div id="sections">
Here I want to load HTML pages
</div>
</div>
</paper-drawer-panel>
<app-router>
<app-route path="/catalogo" import="catalogo.html"></app-route>
</app-router>
</body>
</html>
And the app, looks like:
Screnshoot of the App
You can create every page as a web component and then put the custom element tag inside the div.
This way will save your code very clean and understandable.
Related
I keep getting errors complaining about not being able to run animations when locally serving the following demo. Although it does work in my jsBin.
http://jsbin.com/kadugokade/edit?html,console,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-menu-button/paper-menu-button.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
<dom-module id="my-el">
<template>
<paper-menu-button>
<paper-icon-button icon="menu" slot="dropdown-trigger" alt="menu"></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item>alpha</paper-item>
<paper-item>beta</paper-item>
<paper-item>gamma</paper-item>
<paper-item>delta</paper-item>
<paper-item>epsilon</paper-item>
</paper-listbox>
</paper-menu-button>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Check to see if you have the web-animations-js/ directory installed, required by the following import.
bower_components/neon-animation/web-animations.html
<script src="../web-animations-js/web-animations-next-lite.min.js"></script>
You have to import it using:
bower install --save web-animations/web-animations-js
I am working on a Polymer website and am having some issues. I previously had my main logic in index.html, and I just moved all of the logic from it into a web component I created called app.html. The website worked fine when everything was in index.html, but when I put it all into the web component and created the element in index.html instead, the page is now blank. There are no script errors or anything.
index.html:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<link rel="import" href="elements/app.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body fullbleed unresolved>
<joyce-app></joyce-app>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
app.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/iron-icons/communication-icons.html">
<link rel="import" href="custom-icons.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<!-- Neon elements -->
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../bower_components/firebase-element/firebase-auth.html">
<!-- Routing -->
<link rel="import" href="../bower_components/app-router/app-router.html">
<!-- My elements -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="blog.html">
<link rel="import" href="artist.html">
<link rel="import" href="teacher.html">
<link rel="import" href="research.html">
<link rel="import" href="contact.html">
<link rel="import" href="login.html">
<link rel="import" href="simple-overlay.html">
<dom-module id="joyce-app">
<template>
<!-- Main Area -->
<paper-scroll-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="medium-tall">
<div class="center horizontal layout fit">
<div class="app-name">My Website</div>
<span class="flex"></span>
<paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusKnown || user}}"></paper-icon-button>
<paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusKnown || !user}}"></paper-icon-button>
<template if="{{user}}">{{user.password.username}}</template>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container center layout flex fit">
<div class="bottom-title paper-font-subhead">
<paper-tabs id="nav" selected="{{selected}}">
<paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="custom-icons:brush"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="custom-icons:apple"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="custom-icons:book"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="mail"></iron-icon></paper-tab>
</paper-tabs>
</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<app-router style="display:none;">
<app-route path="/" import="/elements/blog.html"></app-route>
<app-route path="/artist" import="/elements/artist.html"></app-route>
<app-route path="/teacher" import="/elements/teacher.html"></app-route>
<app-route path="/research" import="/elements/research.html"></app-route>
<app-route path="/contact" import="/elements/contact.html"></app-route>
<app-route path="*" import="/elements/blog.html"></app-route>
</app-router>
<neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<neon-animatable><joyce-blog></joyce-blog></neon-animatable>
<neon-animatable><joyce-artist></joyce-artist></neon-animatable>
<neon-animatable><joyce-teacher></joyce-teacher></neon-animatable>
<neon-animatable><joyce-research></joyce-research></neon-animatable>
<neon-animatable><joyce-contact></joyce-contact></neon-animatable>
</neon-animated-pages>
</div>
<simple-overlay id="login" with-backdrop>
<joyce-login></joyce-login>
</simple-overlay>
</paper-scroll-header-panel>
</template>
<script>
(function () {
'use strict';
Polymer({
is: 'joyce-app',
login: function() {
var params = {};
params.email = this.email;
params.password = this.password;
this.$.firebaseLogin.login(params);
},
create: function() {
this.$.firebaseLogin.createUser(this.email, this.password);
},
errorHandler: function(e) {
this.message = 'Error: ' + e.detail.message;
}
});
})();
</script>
</dom-module>
I have been struggling with this for a week and absolutely cannot figure out what I'm doing wrong. I am able to reference other elements instead of joyce-app
The <polymer-element> tag is no longer used to define an element in the new version of Polymer.
https://www.polymer-project.org/1.0/docs/migration.html#registration
Finally figured this out! It looks like my styling from my app-theme.html was only applying to index.html, so it wasn't getting applied to my custom element.
Apparently the correct way to do this is to also have your theme in a .css file and import it into each custom element that you want to use that theme.
Don't forget to add this to your index.html if you're having a reference error(polymer not defined)
<link rel="import" href="/bower_components/polymer/polymer.html">
Hello I am studying Google's Polymer I followed their guide about Responsive Material Design Layouts But I just noticed that the paper-drawer-panel won't take the whole edge of the top part of the browser window. It has a bit of a gap.
Here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<!-- 2. Use an HTML Import to bring in some elements. -->
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
</head>
<body class="fullbleed vertical layout">
<paper-drawer-panel class="flex">
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
The code will render this image as you can see there's a bit of a gap in the edges.
Am I missing something here? What's wrong with my code? Your help and explanation will greatly appreciated. Thanks! :)
You are missing the import of paper-styles.html
How does one make the <paper-menu-button> dropdown work properly? Here is a jsBin.
http://jsbin.com/xamixicuna/4/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer:+v1.1.0/components/">
<title>JS Bin</title>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-menu-button/paper-menu-button.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-menu/paper-menu.html">
<link rel="import" href="paper-item/paper-item.html">
</head>
<body>
Click the below menu icon to make the dropdown menu appear.
<br>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</paper-menu-button>
</body>
</html>
added webcomponents, seems to be working: http://jsbin.com/rucejo/2/edit?html,output
Excellent.
And if you use the <paper-menu-button> in <paper-toolbar> you need use <div> tags before. the <paper-toolbar> don't support the <paper-menu-button>
I'm playing with Google's Polymer library and I have trouble with iron-list component. It simply is not rendered and no error is thrown.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="odTimeTracker - UI test with Polymer">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>odTimeTracker</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-styles/classes/typography.html">
<link rel="import" href="bower_components/iron-image/iron-image.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
<template is="dom-bind" id="app">
<iron-ajax auto url="activities-json.php" handle-as="json"
last-response="{{data}}"></iron-ajax>
<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
<paper-toolbar class="tall">
<paper-icon-button icon="arrow-back"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<div class="bottom title">odTimeTracker</div>
</paper-toolbar>
<iron-list items="[[data.items]]" as="item">
<template>
<div>
<div class="item">
<b><code>[[item.ActivityId]]</code></b>
<div class="pad">
<div class="primary">[[item.Name]]</div>
<div class="secondary">[[item.Started]] – [[item.Stopped]]</div>
<div class="secondary dim">[[item.Description]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-scroll-header-panel>
</template>
<script>
document.querySelector('template[is=dom-bind]').iconForItem = function(item) {
return item ? (item.Stopped == '' ? 'star-border' : 'star') : '';
};
document.addEventListener('paper-header-transform', function(event) {
var title = this.querySelector('.title');
var detail = event.detail;
var deltaHeight = detail.height - detail.condensedHeight;
var scale = Math.max(0.6, (deltaHeight - detail.y) / (deltaHeight / 0.4) + 0.6);
Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
});
</script>
</body>
</html>
Problem is not in consumed JSON (because it's working in other test I written) and I can not figure what the problem is. The code above results just into blank page with header rendered.
It looks like you forgot to import iron-list, throw this in:
<link rel="import" href="bower_components/iron-list/iron-list.html">