Im starting a site using Polymer and the Paper Elements designed for it. I have install the components using bower and it seems i have everything in the right place. here is my code:
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
</head>
<body fullbleed unresolved>
<template is="auto-binding">
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar class="tall">
</core-toolbar>
</core-header-panel>
<div tool layout horizontal flex>
<span flex>Toolbar Text</span>
<core-icon icon="account-circle"></core-icon>
<span>7</span>
</div>
<div flex>
<div class="send_message" layout horizontal>
<paper-input flex label="Enter Text..." id="input" value="{{input}}"></paper-input>
<paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab>
</div>
</div>
</core-scaffold>
</template>
</body>
</html>
Nothing show up once i load the webpage tho. If i take out the template tag i can see the text in my toolbar, but still none of the elements render. Any help is appreciated, thanks in advance!
It looks like you're using an old version of Polymer (< 1.0) based on your usage of core-* elements (replaced by iron-*) and auto-binding (replaced by dom-bind). Polymer docs have a migration guide that could help you upgrade, but it might be easier to start from scratch, using Polymer Starter Kit (which has the latest and greatest).
Related
I just started learning Polymer and I'm trying to put entry and exit animation on a paper dialog. It seems like the entry animation works perfectly, but the exit animation is not. I'm do a workaround by manually coding a jQuery, but I would like to use the built in capability of paper dialog.
Thanks.
<paper-dialog id="dialog" entry-animation="slide-from-top-animation" exit-animation="fade-out-animation" class="dialogstyle" no-cancel-on-outside-click no-cancel-on-esc-key>
<div class="buttons">
<paper-button id="closebutton" dialog-dismiss autofocus><i class="fa fa-times" aria-hidden="true"></i></paper-button>
</div>
<strong>content here</strong>
</paper-dialog>
The exit animation should work as long as you remember to include the fade-out-animation.html.
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-dialog/paper-dialog.html">
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/slide-from-top-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<paper-dialog entry-animation="slide-from-top-animation"
exit-animation="fade-out-animation" opened>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</body>
codepen
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>
In my code the paper drawer panel collapses while re sizing the browser but when i try it in mobile phone it do not collapses.
<!DOCTYPE html>
<html>
<head>
<title>PolyPolymer</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements.html">
</head>
<body fullblead layout vertical fit>
<paper-drawer-panel responsive-width="800px">
<paper-header-panel flex drawer>
<paper-toolbar>
<div class="title middle">Heading</div>
</paper-toolbar>
<div class="bottom row fit bottom">
</div>
</paper-header-panel>
<paper-header-panel flex main>
<paper-toolbar>
<paper-ripple center></paper-ripple>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div flex class="indent title">Heading</div>
</paper-toolbar>
<div>
page content
</div>
</paper-header-panel>
</paper-drawer-panel>
</body>
</html>
I am using polymer 1.0
This is something i was struggling with for a while , what worked for me was
putting this snippet in the head.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I hope it works for you like it did for me :)
I've been working with MeteorJS and Polymer integration. I've done quite some code but I'm very poor at Design especially with CSS. Any idea how I can remove the fade in the area boxed in Red? I can change the background color, but I don't know how to remove the fading.
I'm using the following code for the Meteor Template:
<template name="default_template">
<head>
<title>agus</title>
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-input/paper-decorator.html">
<link rel="import" href="bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
</head>
<body>
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="Profile" id="mnuItemProfile"></core-item>
<core-item label="Dashboard" id="mnuItemDashboard"></core-item>
</core-menu>
</core-header-panel>
<span tool>Agus System</span>
<div class="content">
{{> yield}}
</div>
</core-scaffold>
</body>
</template>
My css only changes colors. Any recommendations (in css) on removing the fade?
Use the "seamed" mode for core-header-panel as in the core-header-panel demo:
<core-header-panel mode="seamed"></core-header-panel>
You can set box-shadow to none, on the element you are changing the background color, so
box-shadow: none;
Hope this help.
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">