Question

我刚开始构建一个Web应用程序的聚合物项目。在此网站上，我使用<core-pages>在不同内容之间导航。在一个页面内是一个<core-list>，它将成为主 - 详细视图。但是这个<core-list>是空的，因为视口的高度为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>

Answer 1

只需将布局属性fit添加到<core-pages>元素即可。这将绝对定位你的元素填满它的第一个定位的父母。

核心页面内的聚合物核心列表

1 个答案: