<core-animated-pages> not working with <core-scaffold>

225 views
Skip to first unread message

Seonman Kim

unread,
Aug 28, 2014, 12:56:12 PM8/28/14
to polym...@googlegroups.com
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>

Kelly St. John

unread,
Sep 11, 2014, 4:32:30 PM9/11/14
to polym...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages