Полимерный элемент сердечника-каркаса не отображается внутри основных страниц
Я играл с основным элементом каркаса полимера, и мне это очень нравится. Однако для конкретного приложения, которое я разрабатываю, core-scaffold не может быть элементом макета верхнего уровня для всего приложения. Мне требуется, чтобы всегда отображалась основная панель инструментов приложения и начальная страница, которая не контролируется компоновкой скаффолда. Другими словами, scaffold-element является основным элементом макета, но только для одного из подстраниц / подэлементов приложения. Чтобы добиться этого, я пытаюсь сделать управляемый скаффолдом полимерный элемент, выбираемый с помощью core-pages или core-animated-pages (начиная с core-pages для простоты, а затем переходя на core-animated-pages, как только я понять, как это работает). Элемент scaffold загружается без каких-либо трудностей, когда не внутри core-страниц. Однако, когда используется внутри core-страниц и он выбран, отображается основная панель инструментов приложения, а элемент scaffold - нет (ошибок в консоли 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>
и вот код элемента scaffold, сокращенный до его основных (также без импорта), просто для полноты:
<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>
Кто-нибудь еще сталкивался с проблемами с использованием элемента scaffold внутри core-страниц? Еще раз, просто для повторения, элемент scaffold сам по себе прекрасно загружается при загрузке за пределы основных страниц.
ОБНОВЛЕНО:
Для полноты картины и для демонстрации всех стилей 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>
1 ответ
Я думаю, что проблема в том, что core-pages не имеет высоты в вашей версии.
Я собрал пример для вас. Я использую атрибут fullbleed, чтобы установить body до 100vh. Затем с помощью fit атрибут, чтобы мой элемент покрывал всю страницу. Затем настройка 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>
Вот jsbin. Нажмите следующую кнопку, чтобы увидеть core-scaffold стр.