Hi,
I want animated page switching using <core-animated-pages>. I created two
sample polymer-elements : one is <login-memu> and the other is <all-page> which
is based on <core-scaffold>.
However, <core-scaffold> page does not display within the
<core-animated-pages>. It shows nothing.
Below is the codes that I tested with. Can you identify what is wrong?
(all-page.html is based on the sample code of
http://www.polymer-project.org/components/core-scaffold/demo.html.
Thanks,
Seonman
---- index.html --
<!doctype html>
<html>
<head>
<title>SVList App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import"
href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import"
href="../components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import"
href="../components/core-animated-pages/transitions/cross-fade.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-item/core-item.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/paper-input/paper-input.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import"
href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-scaffold/core-scaffold.html">
<link rel="import" href="login-menu.html">
<link rel="import" href="my-counter.html">
<link rel="import" href="drawer-panel.html">
<link rel="import" href="all-page.html">
<style>
html, body {
height: 100%;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 5px;
}
</style>
</head>
<body>
<core-animated-pages valueattr="label" selected="login"
transitions="slide-from-right">
<section label="login">
<login-menu label="login"></login-menu>
</section>
<section label="all-page">
<all-page></all-page>
</section>
</core-animated-pages>
<script></script>
</body>
</html>
------ login-menu.html --
<polymer-element name="login-menu">
<template>
<style>
html, body {
height: 100%;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 5px;
}
core-header-panel {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
width: auto;
height: 500px;
}
paper-input {
margin: 1em;
width: auto;
}
paper-button {
margin: 1em;
width: 15em;
}
paper-button.colored {
color: #4285f4;
fill: #4285f4;
}
paper-button[raisedButton].colored {
background: #4285f4;
color: #fff;
}
paper-button[raisedButton].colored #ripple,
paper-button[raisedButton].colored::shadow #ripple {
color: #2a56c6;
}
paper-button[raisedButton].colored #focusBg,
paper-button[raisedButton].colored::shadow #focusBg {
background: #3367d6;
}
div .space {
height: 20px;
}
</style>
<core-header-panel>
<core-toolbar>
<div>Login</div>
</core-toolbar>
<div layout vertical center center-justified>
<paper-input floatinglabel label="User Name:"></paper-input>
<paper-input floatinglabel type="password"
label="Password:"></paper-input>
<paper-button raisedButton class="colored" label="Submit"
on-tap="{{submit}}"></paper-button>
<a href="">Forget password?</a>
<div class="space"></div>
<paper-button raisedButton label="Create Account"
on-tap="{{createAccount}}"></paper-button>
</div>
</core-header-panel>
</template>
<script>
Polymer('login-menu', {
publish: {
},
submit: function() {
console.log("submit");
var p = document.querySelector('core-animated-pages');
console.log(p);
p.selected = "all-page";
},
createAccount: function() {
console.log("createAccount");
}
});
</script>
</polymer-element>
-------- all-page.html ----
<polymer-element name="all-page">
<template>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
font-family: sans-serif;
}
core-scaffold {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.content {
background-color: #fff;
height: 300px;
padding: 20px;
}
/* some default styles for mode="cover" on core-scaffold */
core-scaffold[mode=cover]::shadow core-header-panel::shadow #mainContainer
{
left: 120px;
}
core-scaffold[mode=cover] .content {
margin: 20px 100px 20px 0;
}
</style>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar style="background-color: #526E9C; color:
#fff;">Settings</core-toolbar>
<core-menu>
<core-item icon="settings" label="Lists"></core-item>
<core-item icon="settings" label="Custom Lists"></core-item>
</core-menu>
</core-header-panel>
<div tool>All</div>
<div class="content">Content goes here...</div>
</core-scaffold>
</template>
<script>
Polymer('all-page', {
});
</script>
</polymer-element>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/A0E981A5-AEA6-409E-939D-0DD72ABEB8B0%40gmail.com.
For more options, visit https://groups.google.com/d/optout.
