<core-animated-pages>不使用<core-scaffold> </core-scaffold> </core-animated-pages>

时间：2014-08-28 17:19:41

标签： polymer

我希望使用动画页面切换。我创建了两个样本聚合物元素：一个是，另一个是基于。 但是，页面内不显示。它没有任何表现。 以下是我测试过的代码。你能辨别出什么是错的吗？ （all-page.html基于http://www.polymer-project.org/components/core-scaffold/demo.html的示例代码。

谢谢， Seonman

- index.html - 

<!doctype html>
<html>
  <head>
    <title>Test 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>

1 个答案:

答案 0 :(得分：2)

我认为问题在于变量＆＃39; p＆＃39;只有login-menu.html中的范围，并且在index.html中未定义。通过使用核心信号创建自定义事件，我能够使页面转换工作。这里更详细地概述了该方法：

http://www.polymer-project.org/articles/communication.html#events

以下是代码的功能修订：

- index.html - 

<!doctype html>
<html>
<head>
    <title>Test 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="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 id="pages" valueattr="label" selected="login" transitions="slide-from-right"> 
    <section id="loginsection" label="login">
        <login-menu label="login"></login-menu>
    </section>
    <section label="all-page">
        <all-page></all-page>
    </section>
</core-animated-pages>

<script>
var pages = document.querySelector('#pages');

pages.addEventListener('go-all-page', function(e) {
    console.log("go-all-page signal received by index.html");
    pages.selected = e.detail.selected;
    console.log(pages.selected);
});
</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");
            this.fire('go-all-page', {selected: "all-page"});
            console.log("go-all-page got fired from login-menu.html");
        },
        createAccount: function() {
            console.log("createAccount");
        }
    });
</script>

</polymer-element>

---- all-page.html - 

<link rel="import" href="../components/core-scaffold/core-scaffold.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.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/paper-item/paper-item.html">
<link rel="import" href="../components/core-icon/core-icon.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">

<polymer-element name="all-page" noscript>
<template>
<style>
    :host #core_toolbar {
        color: white;
    }

    :host paper-item.core-selected {
        color: #004b8d;
    }

    :host #side_menu {
        margin-left: 30px;
    }
</style>

<core-scaffold>
    <core-header-panel navigation flex mode="seamed">
        <core-toolbar id="core_toolbar"></core-toolbar>
            <core-menu id="side_menu">
                <paper-item icon="settings">Hey</core-item>
                <paper-item icon="settings">Hi</core-item>
            </core-menu>
    </core-header-panel>
</core-scaffold>
</template>
</polymer-element>

希望这适用于你：）

相关问题
最新问题