I am trying to learn how to use Paper Elements within Polymer 1.0. When I add basic elements like a button, they are not styled properly. I see a button shape with a shadow. However, I cannot get any colors to appear. Everything is just white. Here is my code:
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="res/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="res/components/polymer/polymer.html">
<!-- Iron Elements -->
<link rel="import" href="res/components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="res/components/iron-pages/iron-pages.html">
<link rel="import" href="res/components/iron-signals/iron-signals.html">
<!-- Paper Elements -->
<link rel="import" href="res/components/paper-button/paper-button.html">
<link rel="import" href="res/components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/components/paper-toolbar/paper-toolbar.html">
<!-- Neon Elements -->
<link rel="import" href="res/components/neon-animation/neon-animated-pages.html">
<link rel="import" href="res/components/neon-animation/neon-animatable.html">
<link rel="import" href="res/components/neon-animation/neon-animations.html">
</head>
<body class="fullbleed">
<div class="flex">
<div class="vertical layout center-justified">
<h4>Welcome</h4>
<paper-button tabindex="0" on-click="_onLoginButtonClick" raised class="colorful custom">Login</paper-button>
<paper-button on-click="_onSignUpButtonClick">Sign Up</paper-button>
</div>
</div>
</body>
</html>
I was trying to show just a blue button that is consistent with the material design theme. So, I added raised class="colorful" as shown in the demo. However, I do not get a blue button. When I looked at the code on GitHub, I noticed that they seem to be defining ALL of the color classes in the style section.
Is there a way to just bring in theme? Or do I have to actually define all of the colors?
Thanks
Related
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">
I posted kinda similar problem here in StackOverFlow regarding paper-header-panel of Polymer it was answered but the solution isn't efficient or right way of doing it, you can look it here. Specific import should be made not the generic one as mentioned here.
My code for rendering it properly is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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/classes/iron-flex-layout.html">
</head>
<body class="fullbleed layout vertical">
<!-- paper-header-panel must have an explicit height -->
<paper-header-panel class="flex">
<paper-toolbar>
<div>Header</div>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>
</html>
But the problem is that this import is already been deprecated.
<link rel="import"
href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
The documentations recommended to use the new class which is.
<link rel="import"
href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
But it doesn't render properly the paper-header-panel.
What did I miss? Or what is my mistake? Any help would be deeply appreciated. Thanks!
From the source: https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html
A set of layout classes that let you specify layout properties directly in markup.
You must include this file in every element that needs to use them.
Sample use:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
<div>cross axis start alignment</div>
</div>
The following imports are available:
iron-flex
iron-flex-reverse
iron-flex-alignment
iron-flex-factors
iron-positioning
You'd only have to include the iron-flex and iron-positioning style modules for your use case.
Ex.
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-positioning"></style>
<body class="fullbleed layout vertical">
<!-- paper-header-panel must have an explicit height -->
<paper-header-panel class="flex">
<paper-toolbar>
<div>Header</div>
</paper-toolbar>
<div>Content</div>
</paper-header-panel>
</body>
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
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.
I have code as follows:
<body unresolved>
<core-header-panel>
<core-toolbar layout horizontal center>
<h1 flex>Title</h1>
Users
Terms
</core-toolbar>
<div class="container" layout horizontal>
<core-input placeholder="Placeholder text here"></core-input>
</div>
</core-header-panel>
</body>
The problem is that my core-input component doesn't get rendered. The core-header panel and core-toolbar do, but the core-input doesn't. It gets a width and height of 0px. Even if I assign width and height to it, it renders with nothing inside. I'm loading all components using imports.
Am I missing something?
Imports are:
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../custom-components/admin-users.html">
<link rel="import" href="../components/core-input/core-input.html">
Chrome is version 38.
From the documentation:
Important: The core-header-panel will not display if its parent does not have a height.
Styling the core-header-panel with the appropriate height and width properties will display the placeholder. Live Demo available here.
Update your HTML imports to include core-toolbar:
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/core-input/core-input.html">
And add this styling on the same page as your HTML imports:
<style>
core-header-panel {
width: 360px;
height: 400px;
}
</style>
Replace
<core-input placeholder="Placeholder text here"></core-input>
with
<input is="core-input" placeholder="Placeholder text here">