【发布时间】：2026-01-18 23:20:06
【问题描述】：
我想要使用 .我创建了两个示例聚合物元素：一个是，另一个是基于. 但是，页面不显示在 .它什么也没显示。 以下是我测试过的代码。你能识别出什么是错的吗？ （all-page.html是基于http://www.polymer-project.org/components/core-scaffold/demo.html的示例代码。
谢谢， 善满
——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>
【问题讨论】：
-
嘿，Brian 需要你的帮助！ *.com/questions/27614346/…
标签： polymer