我刚刚启动了一个 Polymer 元素来构建 Web 应用程序。在这个网站上我使用 <core-pages>在不同的内容之间导航。一页里面是<core-list>那将是主从 View 。但是这个<core-list>是空的，因为视口(viewport)的高度为 0。有人可以告诉我如何解决这个问题吗？
这里是这个区域的代码:
<body fit >
<template is="auto-binding">
<core-drawer-panel>
<core-header-panel drawer>
<core-toolbar id="navheader'">
<span>Menü</span>
</core-toolbar>
<core-menu id="drawerMenu" selected="modules" selectedIndex="{{route}}"
valueattr="hash" excludedLocalNames="hr">
<core-item icon="label" hash="modules">Module</core-item>
<core-item icon="question-answer" hash="credits">Über uns</core-item></div>
<hr>
<core-item icon="receipt" hash="impressum">Impressum</core-item>
<core-item icon="receipt" hash="privace_policy">Datenschutzerklärung</core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar id="mainheader">
<paper-icon-button
id="navicon" icon="menu"></paper-icon-button>
<span flex>Gruppenstunde</span>
</core-toolbar>
<core-pages selected="{{route}}" valueattr="hash" layout>
<div><modules-list hash="modules"></modules-list></div>
<div><page-credits hash="credits"></page-credits></div>
<div><page-impressum hash="impressum"></page-impressum></div>
<div><page-privacy-policy hash="privace_policy"></page-privacy-policy></div>
</core-pages>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
var template = document.querySelector('template');
template.addEventListener('template-bound', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.querySelector('core-drawer-panel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
var menu = document.querySelector('core-menu');
menu.addEventListener('core-activate', function() {
drawerPanel.togglePanel();
});
});
</script>
</body>
在<modules-list>里面是 core-list :
<paper-shadow z="1"></paper-shadow>
<paper-fab icon="list" class="filter"></paper-fab>
<paper-fab icon="add" class="add"></paper-fab>
<core-ajax url="../includes/api/polymerGetModules.php" response="{{data}}" handleAs="json" auto></core-ajax>
<core-list data="{{filteredData}}" extraItems="50" on-core-activate="{{moduleSelected}}" selection="{{selection}}" flex>
<template>
<div class="list-item {{selected?'selected':''}}">
<h2>{{model.title}}</h2>
</div>
</template>
</core-list>
最佳答案
只需添加布局属性fit给你的<core-pages>元素。这将完全定位您的元素以填充其第一个定位的父元素。
关于css - 核心页面内的 polymer 核心列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27002655/