我一直在玩聚合物的核心支架元素，我非常喜欢它。但是，对于我正在开发的特定应用程序，核心支架不能是整个应用程序的顶级布局元素。我需要始终显示主应用程序工具栏以及不受脚手架布局控制的初始页面。换句话说，scaffold-element是主要布局元素，但仅适用于应用程序的子页面/子元素之一。为了实现这一目标，我试图通过核心页面或核心动画页面来选择脚手架控制的聚合物元素（为简单起见，从核心页面开始，然后迁移到核心动画页面）一旦我理解了它是如何工作的）。当不在核心页面内时，脚手架元素没有任何困难地加载。但是，当在核心页面中使用并且选中它时，将显示主应用程序工具栏，但脚手架元素不会显示（Chrome控制台中没有错误）。换句话说，主应用程序工具栏下的空白显示。任何人都可以对此有所了解吗？这可能是某种造型问题吗？
以下是高级应用元素代码，其中包含了解要解决问题的基本要素（不包括导入）：
<polymer-element name="my-app">
<template>
<style>
core-header-panel {
/* height: 100% fails here on some browsers */
height: 100vh; /* 100% of the viewport height */
}
core-toolbar {
background-color: #5264ae; /* Google Blue ; */
color: #fff; /* White */
font-weight: 700; /* Boldish font */
}
</style>
<!-- HIGH LEVEL APP LAYOUT ELEMENT -->
<core-header-panel id="appHeader" mode="standard">
<!-- OUTER APP TOOLBAR ELEMENT -->
<core-toolbar id="appToolbar">
<paper-icon-button id="navicon" icon="arrow-back"></paper-icon-button>
<span flex>App Name</span>
<paper-icon-button id="searchbutton" icon="search"></paper-icon-button>
</core-toolbar>
<!-- MAIN CONTENT ELEMENTS -->
<core-pages id="mainPages" selected="{{selectedPage}}">
<my-default-page-element name="firstPage" on-core-activate="{{pageSelect}}"></my-default-page-element>
<my-scaffold-element name="scaffoldPage"></my-scaffold-element>
</core-pages>
</core-header-panel>
</template>
<script>
Polymer('my-app', {
selectedPage: 'firstPage',
//selectedPage: 'scaffoldPage',
pageSelect: function () {
this.showPage();
},
showPage: function () {
//this.selectedPage = "scaffoldPage";
this.$.mainPages.selected = "scaffoldPage";
}
});
</script>
这里的脚手架元素代码也被剥离了它的基本要素（也没有进口），只是为了完整性：
<polymer-element name="my-scaffold-element">
<template>
<style shim-shadowdom>
core-toolbar {
background-color: #5264ae; /* Google Blue ; */
color: #fff; /* White */
}
core-scaffold::shadow core-toolbar {
background-color: #5264ae; /* Google Blue ; */
color: #fff; /* White */
}
core-scaffold::shadow core-header-panel {
background: #FFF; /* White */
color: black;
}
/* For use with the shim-shadowdom directive interpreted only when on a non-webcomponent/shadowdom native platform */
/* (i.e. I noticed the above styling wasn't being applied by FireFox */
core-scaffold #main core-header-panel {
background: #FFF; /* White */
color: black;
}
</style>
<core-scaffold id="contentscaffold">
<core-header-panel id="innerHeader" navigation flex>
<core-toolbar id="innerToolbar">
<span>Options</span>
</core-toolbar>
<core-menu>
<core-item label="Subpage1" on-tap=" {{ pageTapAction }}"></core-item>
<core-item label="Subpage2" on-tap="{{ pageTapAction }}"></core-item>
<core-item label="Subpage3" on-tap="{{ pageTapAction }}"></core-item>
<core-item label="Subpage4" on-tap="{{ pageTapAction }}"></core-item>
<core-item label="Subpage5" on-tap="{{ pageTapAction }}"></core-item>
</core-menu>
</core-header-panel>
<span id="sectionTitle" tool>Subpage1</span>
<core-pages id="pages" selected="0">
<section id="sectionPage1">
<my-subpage-one-element></my-subpage-one-element>
</section>
<section id="sectionPage2">
<div>Page 2 polymer element here</div>
</section>
<section id="sectionPage3">
<div>Page 3 polymer element here</div>
</section>
<section id="sectionPage4">
<div>Page 4 polymer element here</div>
</section>
<section id="sectionPage5">
<div>Page 5 polymer element here</div>
</section>
</core-pages>
</core-scaffold>
</template>
<script>
Polymer('my-scaffold-element', {
pageTapAction: function(e, detail, sender) {
for(var key in sender.parentNode.children) {
if (sender.parentNode.children[key].label == e.target.label) {
this.$.pages.selected = key;
this.$.sectionTitle.innerText = e.target.label;
}
}
}
});
</script>
在核心页面中使用脚手架元素会遇到任何其他问题吗？再次，只是为了重新迭代，脚手架元素在加载到核心页面之外时可以自行加载。
更新：
为了完整性并显示此场景中涉及的所有CSS样式，下面是导入高级应用程序元素本身的索引页面。注意使用fullbleed：
<html>
<head>
<title>Application Title</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/my-app-components/my-app.html">
<style>
html, body {
height: 100%;
margin: 0;
}
body {
font-family: sans-serif;
}
</style>
</head>
<body fullbleed unresolved>
<template is="auto-binding">
<my-app></my-app>
</template>
</body>
</html>
答案 0 :(得分：2)
我认为问题是core-pages在您的版本中没有高度。
我为你举了一个例子。我正在使用the fullbleed attribute to set the body to 100vh。然后使用the fit attribute使我的元素覆盖整个页面。然后将core-pages设置为height 100%。
<body fullbleed>
<polymer-element name="x-foo" fit>
<template>
<style>
core-pages {
height: 100%;
}
</style>
<button on-tap="{{prevPage}}">Prev page</button>
<button on-tap="{{nextPage}}">Next page</button>
<core-pages id="pages" selected="0">
<div>Page 1. Not so exciting</div>
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Application</core-toolbar>
<core-menu theme="core-light-theme">
<core-item icon="settings" label="item1"></core-item>
<core-item icon="settings" label="item2"></core-item>
</core-menu>
</core-header-panel>
<div tool>Title</div>
<div>Content goes here...</div>
</core-scaffold>
</core-pages>
</template>
<script>
Polymer({
prevPage: function() {
this.$.pages.selected = 0;
},
nextPage: function() {
this.$.pages.selected = 1;
}
});
</script>
</polymer-element>
<x-foo></x-foo>
</body>
Here's a jsbin。点击下一步按钮即可查看core-scaffold页面。