Question

我试图将<core-list>放入<core-header-panel>，但核心列表在我给它一个高度之前不会呈现。

所以我的示例代码确实适用于非常愚蠢的黑客，但我认为必须有更好的方法使核心列表进入页面。

结构如下：

enter image description here

这是我的代码：

JSFiddle： http://jsfiddle.net/gu0g8kt3/2/

HTML

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">

<core-drawer-panel>
  <core-header-panel drawer>
    <core-image style="width:256px; height:170px; background-color: lightgray;"
                sizing="cover" preload fade src="http://lorempixel.com/256/170/abstract/"></core-image>

      <core-menu selectedAttribute="">
      <paper-item>
        <core-icon icon="assignment"></core-icon>
        <div>Option #1</div>
      </paper-item>
      <paper-item>
        <core-icon icon="account-circle"></core-icon>
        <div>Option #2</div>
      </paper-item>
    </core-menu>
  </core-header-panel>

  <core-header-panel id="hPanel" main>
    <core-toolbar id="toolbar">
      <paper-menu-button icon="menu" core-drawer-toggle></paper-menu-button>
      <span flex>This is my app!</span>
    </core-toolbar>

    <div class="content">


      <!-- here is the problem -->        
      <core-list id="list" height="120">
        <template>
            <div class="row {{ { selected: selected } | tokenList }}">
                <div flex><core-image style="width:40px; height:40px; background-color: lightgray;" src="{{model.image_src}}" sizing="cover" preload></core-image></div>
            </div>
        </template>
       </core-list>
       <paper-fab class="fab" icon="add"></paper-fab>


    </div>

  </core-header-panel>
</core-drawer-panel>

CSS

core-header-panel {
  background-color: #f9f9f9;
}

.fab {
  position: absolute;
  bottom: 16px;
  right: 16px;
}

/* main area content */
core-list {
  overflow: hidden;
  display: block;
  height: 200px; /* this is just a bad workaround, must be > 0 */
  margin: 0 auto;
}

.row {
  background: lightblue;
  height: 120px;
  overflow: hidden;
  border-bottom: 1px #dedede solid;
}

.selected {
  background: orange;
}

/* drawer content */
core-toolbar {
  color: #2c2c2c;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0px #d5d5d5, 2px 2px 0px rgba(0, 0, 0, 0.2);
  text-rendering: optimizeLegibility; }

core-menu {
  margin: 0px;
  margin-top: -4px; }
  core-menu paper-item {
    border-bottom: 1px grey solid; }
    core-menu paper-item > div {
      padding-left: 10px !important; }

的JavaScript

var data = [];

for (var i = 0; i < 10000; ++i) {
    data.push({
        image_src: 'http://lorempixel.com/40/40/business/?' + Math.round(Math.random()*100)
    });
}

document.querySelector('#list').data = data;

// the only way it works for me is the following:
var mainPanel = document.querySelector('#hPanel');
var toolbar = document.querySelector('#toolbar');
var list = document.querySelector('#list');

var contentHeight = mainPanel.clientHeight - toolbar.clientHeight;
list.style.height = contentHeight + 'px';

Answer 1

正如本评论中所提到的，核心列表需要一些帮助才能正确调整大小：https://github.com/Polymer/core-list/issues/47#issuecomment-63126241

我能够通过两个更改修复你的jsfiddle：

给予＆＃39; fit＆＃39;布局到内容div，因此它将填充hPanel中的整个剩余区域：

<div class="content" fit>

给列表提供100％的高度

 <core-list id="list" height="120" style="height:100%;" >

通过这些更改，无需在javascript中设置列表的高度。

JSFiddle：http://jsfiddle.net/6ktwg9kk/

为什么core-list没有在core-header-panel中设置高度？

1 个答案: