結合` <iron-list> 與` <paper-scroll-header-panel> `

Question

<iron-list> （ docs ）需要固定的高度，但是另一方面， <paper-scroll-header-panel> （ docs ， demo ）期望<div>高度大於可用高度，因此允許您在滾動時折疊標題。 如何以一種這樣的方式組合這兩個元素，使得鐵頭列表正確地重新計算（手動調整其大小並觸發resize事件？：S），而標題變小？

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必須以太大小顯式，或者委托滾動到顯式大小的父級。 “顯式調整大小”是指它要么通過類或內聯樣式設置了顯式的CSS height屬性，要么通過其他布局方式（例如flex或fit類）進行調整。

您可以從官方文檔中閱讀此內容 ，也可以通過這兩個一起查看此實時演示 。