<style>
#mainContainer {
display: flex;
flex-direction: column;
}
</style>
...
<body class="fullbleed layout vertical">
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar fixed></paper-toolbar>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar fixed></paper-toolbar>
<main class="flex">
<section class="main-section">
<paper-material>
<p>Content</p>
</paper-material>
</section>
</main>
<footer>
<p>Footer</p>
</footer>
</paper-header-panel>
</paper-drawer-panel>
</body><polymer-element name="my-tag" attributes="myprop">
<script>
Polymer('my-tag', {
created: function () {
console.log('myprop=' + this.myprop);
}
});
</script>
</polymer-element><my-tag myprop="myval"></my-tag>
<polymer-element name="my-element" attributes="bar">
<template>
<template repeat="{{ foo in bar }}">
<input value="{{ setC(foo, foo.a + foo.b) }}"/>
<input value="{{ foo.c }}"/>
</template>
</template>
<script>
Polymer('my-element', {
setC: function (f, v) {
f.c = v;
return f.c;
}
});
</script>
</polymer-element>window.addEventListener('polymer-ready', function (e) {
var el = document.createElement('my-element');
el.bar = [
{
a: 1,
b: 2,
c: null
},
{
a: 3,
b: 4,
c: null
}
];
document.body.appendChild(el);
});