【发布时间】：2014-10-27 01:45:48
【问题描述】：
我一直在玩聚合物的核心支架元素，我非常喜欢它。但是，对于我正在开发的特定应用程序，核心脚手架不能是整个应用程序的顶级布局元素。我需要一个始终显示的主应用程序工具栏和一个不受支架布局控制的初始页面。换句话说，scaffold-element 是主要的布局元素，但仅适用于应用程序的子页面/子元素之一。为了实现这一点，我试图通过 core-pages 或 core-animated-pages 来选择脚手架控制的聚合物元素（为简单起见，从 core-pages 开始，然后迁移到 core-animated-pages 一旦我了解它是如何工作的）。当不在核心页面内时，脚手架元素加载没有任何困难。但是，当在 core-pages 中使用并选中它时，会显示主应用程序工具栏，但不会显示脚手架元素（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>
【问题讨论】：
标签： polymer paper-elements core-elements