将 `<iron-list>` 与 `<paper-scroll-header-panel>` 组合

Question

<iron-list> (docs) requires a fixed height, yet on the other hand <paper-scroll-header-panel> (docs, demo) 期望 <div> 的高度超过可用高度，因此允许您在滚动时折叠 header。如何以铁列表正确重新计算的方式组合这两个元素（手动调整大小并触发调整大小事件？：S）而 header 变小？

Answer 1

考虑下面的布局。只要 iron-list 的父级 - paper-scroll-header-panel 有一个 fit 选择器，它应该可以正常工作而无需做任何额外的事情。

<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
  <paper-toolbar class="tall">
  </paper-toolbar>
  <iron-list items="[[data]]">

这是因为-

iron-list must ether be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (e.g. the flex or fit classes).

你可以从 official document and also check out this live demo 阅读这篇文章，这两个一起工作。

将 `<iron-list>` 与 `<paper-scroll-header-panel>` 组合

Combining an `<iron-list>` with a `<paper-scroll-header-panel>`

javascript

polymer

polymer-1.0