I want to create a structure where i have a list and i can animate each item of the list with hero transitions. But if i make it like this then all items get on top of each other... What should I do?
<template repeat="{{item in items}}">
<div layout vertical content
flex>
<core-animated-pages content
layout vertical flex >
<section>
<paper-shadow class="chain">
{{item}}
</paper-shadow>
</section>
<section>
{{item.artists}}
</section>
</core-animated-pages>
</div>
</template>
To keep the items from overlapping you need to make sure that your element has a height. You can do this by using layout attributes on the body itself and your custom element instance.
<body fullbleed layout vertical>
<polymer-element name="x-foo">
<template>
<template repeat="{{item in items}}">
<div layout vertical flex>
<core-animated-pages layout vertical flex>
<section>
{{item.artist}}
</section>
</core-animated-pages>
</div>
</template>
</template>
<script>
Polymer({
items: [
{
artist: 'Some dude'
},
{
artist: 'Some other dude'
}
]
});
</script>
</polymer-element>
<x-foo layout vertical flex></x-foo>
</body>
Example jsbin
Related
I am building a full-screen app with Polymer. Currently, I've defined my layout like this:
<body unresolved class="fullbleed">
<template is="dom-bind" id="app">
<paper-scroll-header-panel fixed>
<paper-toolbar>
<div class="spacer title" style="margin-left:0px;">My App</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
<my-nav flex></my-nav>
</div>
<div main class="content">
<my-view></my-view>
</div>
</paper-drawer-panel>
</paper-scroll-header-panel>
</template>
</body>
The view in <div main class="content"> looks like this:
my-view.html
<dom-module id="project-view">
<template>
<neon-animated-pages class="flex" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<!-- Page 1 -->
<div>
<paper-header-panel mode="seamed">
<div class="paper-header">
<paper-toolbar class="view-toolbar">
<paper-icon-button icon="menu"></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="menu"></paper-icon-button>
</paper-toolbar>
</div>
<div class="content">
<paper-material elevation="2">
<h1>Welcome</h1>
<p>
This will be a BIG text block that require scrolling. The toolbar should always be visible. The "paper" should scroll under the toolbar like a Google Doc
</p>
</paper-material>
</div>
</paper-header-panel>
</div>
<!-- Page 2 -->
<div>
<paper-material elevation="2">
<p>Another page</p>
</paper-material>
</div>
</neon-animated-pages>
<script>
Polymer({
is: "my-view",
ready: function() {
this.selectedPageIndex = 0;
}
});
</script>
</template>
</dom-module>
When I run this page, the content under the toolbar will not scroll. It stays fixed in position. I do not understand why. How do I create some paper under a toolbar so that it scrolls beneath the toolbar like Google Docs?
Update:
Main layout changed to:
<paper-header-panel class="flex" style="background-color:lightcoral;">
<paper-toolbar>
<div class="spacer title" style="margin-left:0px;">My App</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</paper-toolbar>
<div class="flex content" style="background-color:lightsalmon;">
<div class="horizontal layout">
<div drawer>
<my-nav flex></my-nav>
</div>
<div main class="content">
<my-view></my-view>
</div>
</div>
</div>
</paper-header-panel>
The content scrolls. However, the content of the paper-drawer-panel does not fill the remaining area below the toolbar. I do not understand why. It's like the iron-flex-layout stuff isn't working. What am I doing wrong?
My guess is that it has something to do with the paper-drawer-panel being inside of the paper-scroll-header-panel element. On top of that likely being the culprit, you should consider that if you do have the paper-drawer-panel inside of the paper-scroll-header-panel, it will scroll with your content.
I would try either removing or moving the paper-drawer-panel to start with, and then adding it back in once you have the scrolling working.
I'm not sure if this is already implemented, but this blog post might help you as it explicitly mentions the paper-toolbar together with flex layout :
https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/
So you could try using mixins instead of the flex-class.
Try to use paper-dialog-scrollable. All you have to do is set width and height of the scroll area. Works with static and dynamic content.
I have a Polymer template which creates a list of paper-items. I'd like to decorate some of those with additional CSS classes. What I've done so far is use conditional templates and for each variant, which I find quite ugly ( see below ).
<template is="dom-bind">
<iron-ajax url="https://example.com/data.json" last-response="{{data}}" auto></iron-ajax>
<div role="listbox">
<template is="dom-repeat" items="[[data.talks]]" as="talk">
<paper-item>
<paper-item-body two-line>
<template is="dom-if" if="[[shouldHighlight(talk)]]">
<div class="highlight"> <!-- content --></div>
</template>
<template is="dom-if" if="[[!shouldHighlight(talk)]]">
<div><!-- content --></div>
</template>
</paper-item-body>
</paper-item>
</template>
</div>
</template>
Is there a better way to conditionally add CSS classes using Polymer?
You can use a computed function/property to do it:
Inside your template:
<div class$="{{_getClassForHighlight(talk)}}"> <!-- content --></div>
Inside your Polymer elment:
_getClassForHighlight: function(talk) {
if (this.shouldHighlight(talk)) {
return "highlight";
}
return "";
}
I have a single page app which I experimenting a bit with layout. Whilst I try to understand it, I am trying to position a element at the centre of the content area of a element. I am using as the header of all of this.
Here is the overall form of the body area of my index.html
<body unresolved class="fullbleed layout vertical">
<template id="app" is="dom-bind">
<paper-header-panel class="flex" mode="standard">
<paper-toolbar> ... </paper-toolbar>
<neon-animated-pages
class="flex"
selected="[[route]]"
attr-for-selected="selector"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation">
<pas-menu path="/" selector="home" route="{{route}}" access=[[user.keys]]></pas-menu>
.............. More elements
</neon-animated-pages>
</paper-header-panel>
Looking at my element
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../pas-route-behaviour/pas-route-behaviour.html">
<template>
<style>
paper-card: {
width:400px;
height:200px;
}
</style>
<div class="vertical layout center">
<div class="horizontal layout">
<div class="flex"></div>
<paper-card heading="PAS MENU to go here"></paper-card>
<div class="flex"></div>
</div>
</div>
</template>
<script>
Polymer({
is: 'pas-menu',
behaviors :[PAS.RouteBehaviour,Polymer.NeonAnimatableBehavior],
properties: {
access: {
type: Array,
value: []
}
}
});
</script>
</dom-module>
When I load all this up and look at the result with the chome dev tools I find that the element has zero height and the only height I can seemingly introduce it the Text of the paper card and its padding.
The net result is the card sits in the top of the content area (centered), with the card size just that to surround the text. Why have I lost the height of the full screen and what do I need to do to centre the card vertically.
The only mistake you are doing here is in your style section, the selector for the paper-card is
paper-card and not paper-card:
Also give a background-color or a shadow to your paper-card if you want to see it,
Both <div class='flex'></div> are not useful because the parent div is already centered. Finally your element shoud look like
<dom-module id="pas-menu">
<template>
<style>
:host
{
#apply(--layout-vertical); // vertical layout for the host of pas-menu
#apply(--layout-center-center); // make the host center its element
// or if you want you to keep it simple
// display:box
top: 350px; // margin-top for the element pas-menu
}
paper-card {
width:400px;
height:200px;
background-color:gray // color to the paper-card or
#apply(--shadow-elevation-2dp);// use the predifined mixin for shadow elevation
}
</style>
<div class="vertical layout center">
<div class="horizontal layout">
<paper-card heading="PAS MENU to go here"></paper-card>
</div>
</div>
</template>
<script>
Polymer({
is: 'pas-menu',
behaviors :[PAS.RouteBehaviour,Polymer.NeonAnimatableBehavior],
properties: {
access: {
type: Array,
value: []
}
}
});
</script>
</dom-module>
:
I am currently having my first tries with Polymer.
What I have is a custom polymer element nested in a core-animated-pages element on the main page.
The sources are:
index.html
<core-header-panel>
<core-toolbar>
[...]
</core-toolbar>
<core-animated-pages transitions="slide-from-right">
[...]
<section>
<contact-page></contact-page>
</section>
</core-animated-pages>
</core-header-panel>
contact-page.html
<polymer-element name="contact-page">
<template>
[...]
<div layout horizontal start-justified>
<div class="placeholder">
</div>
<div class="contact-box" layout horizontal center-justified flex three>
<div class="form-container" layout vertical>
<h2>Contact</h2>
<paper-input class="additional-dist" floatingLabel label="Name"></paper-input>
<paper-input id="mail" floatingLabel label="Mail"></paper-input>
<div layout horizontal>
<paper-input id="msg" multiline maxRows="4" rows="4" floatingLabel label="Message" flex></paper-input>
</div>
<paper-button label="Submit" on-tap="{{submit}}" self-end></paper-button>
</div>
</div>
</div>
[...]
</template>
[...]
</polymer-element>
The HTML file currently looks like this in Chrome 37.
Now what I'd like to have is that the yellow bar (placeholder) is vertically stretched over the whole viewport, like this.
Unfortunately I can't figure out which polymer layout attributes I have to use to achieve this and in which tags I have to put them. Can anybody help me here?
Edited to incorporate feedback from sjmiles:
Give this a shot:
<body fullbleed layout vertical>
<polymer-element name="x-foo" layout vertical>
<template>
<style>
#header {
background: tomato;
}
#col {
background: yellow;
}
</style>
<div id="header" layout horizontal>
Header
</div>
<div id="main" flex layout horizontal>
<div flex id="col">Col</div>
<div flex layout vertical>
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
</div>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
<x-foo flex></x-foo>
</body>
I'm using the fullbleed attribute to set the body to 100vh and telling it to layout its children vertically using flexbox. Then setting x-foo to flex so it fills the screen. Then it's just a matter of getting the right children to flex.
Here's a jsbin to preview.
I am trying to make "flex" attribute work nicely when it is specified as light DOM. The sample code below is what I have in a custom element that I am working on.
This works:
<core-scroll-header-panel fixed>
<core-toolbar>
<paper-icon-button icon="arrow-back"></paper-icon-button>
<span flex>Hello!</span>
<paper-icon-button icon="search"></paper-icon-button>
<!--<content select="[toolbar]"></content>-->
</core-toolbar>
<div content>
stuff...
</div>
</core-scroll-header-panel>
Content of select="[toolbar]" is the same 3 lines in the example above. This does not work. Span does not flex:
<core-scroll-header-panel fixed>
<core-toolbar>
<content select="[toolbar]"></content>
</core-toolbar>
<div content>
stuff...
</div>
</core-scroll-header-panel>
Any idea how to make this work? I am ok with a solution where I need to place additional styles in the custom element that I am creating but not sure how to go about it.
Using select="[toolbar] on the <content> insertion point means that your light dom nodes will need a toolbar attribute to be pulled in:
<my-element>
<paper-icon-button toolbar icon="arrow-back"></paper-icon-button>
<span toolbar flex>Hello!</span>
<paper-icon-button toolbar icon="search"></paper-icon-button>
</my-element>
I was able to get this working without issue. It also needed a fit layout attr on the core-scroll-header-panel to give it a size.
<script src="https://www.polymer-project.org/0.5/webcomponents.min.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-icon-button/paper-icon-button.html">
<polymer-element name="my-element" noscript>
<template>
<core-scroll-header-panel fit>
<core-toolbar>
<content select="[toolbar]"></content>
</core-toolbar>
<div content>
stuff...
</div>
</core-scroll-header-panel>
</template>
</polymer-element>
<my-element>
<paper-icon-button toolbar icon="arrow-back"></paper-icon-button>
<span toolbar flex>Hello!</span>
<paper-icon-button toolbar icon="search"></paper-icon-button>
</my-element>