[英]how to make polymer iron-list keep expanding, instead of scolling
I am following the example of collapsible items of iron-list . 我以铁皮表的可折叠项目为例。 However, I have more content under the iron-list, say an iron-menu.
但是,铁菜单上的内容比铁列表中的内容还多。
The issue is that the height of the iron-list does not dynamically increase as the user expand the iron-list contents. 问题在于,随着用户扩展铁清单内容,铁清单的高度不会动态增加。 Instead the iron-list becomes scollable, making it hard to see all the contents.
取而代之的是,铁名单变得可伸缩,很难看到所有内容。
I would like the iron-list to expand in height, and push down the content (iron-menu) below. 我希望铁表的高度增加,并按下下面的内容(铁菜单)。 Is there a way to do this?
有没有办法做到这一点? Many thanks.
非常感谢。
I also tried to set the scroll-target
, but it doesn't push the content below down. 我还尝试设置了
scroll-target
,但是它没有将内容压低。 It overlaps the iron-list content onto the content below, which is not what I want. 它会将铁列表内容与下面的内容重叠,这不是我想要的。
<iron-list scroll-target="document" ... >
The size of the iron-list must be set explicitly, as described on the iron-list project ReadMe under "Sizing iron-list". 铁清单的大小必须明确设置,如铁清单项目自述文件“调整铁清单的大小”中所述。
So you could use javascript to change the height, based on other conditions. 因此,您可以根据其他条件使用javascript更改高度。
The other way of putting something 'below' an iron-list is to compute whether you are on the last list item, and add in a custom row (ie pagination) as shown here 东西放在“自下而上”的铁列表的另一种方法是计算你是否在最后一个列表项,并在自定义添加一行(即分页),如在这里
But if you don't have a huge dataset, you could use dom-repeat, which will add nodes to the DOM, and therefore you could have your list expand. 但是,如果您没有庞大的数据集,则可以使用dom-repeat,它将节点添加到DOM,因此可以扩展列表。
I finally find a solution. 我终于找到了解决方案。 As you can see from the example , the function
getClassForItem()
changes the div class to control show/hide. 从示例中可以看到,函数
getClassForItem()
将div类更改为控制显示/隐藏。 Thus we can trigger the resize event together with it. 因此,我们可以一起触发调整大小事件。
getClassForItem: function(item, selected) {
this.querySelector('iron-list').fire('iron-resize'); // added line
return selected ? 'item expanded' : 'item';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.