| OLD | NEW |
| 1 iron-list | 1 iron-list |
| 2 ======================== | 2 ======================== |
| 3 | 3 |
| 4 `iron-list` displays a virtual, *'infinite'* list. The template inside | 4 `iron-list` displays a virtual, *'infinite'* list. The template inside |
| 5 the iron-list element represents the DOM to create for each list item. | 5 the iron-list element represents the DOM to create for each list item. |
| 6 The `items` property specifies an array of list item data. | 6 The `items` property specifies an array of list item data. |
| 7 | 7 |
| 8 For performance reasons, not every item in the list is rendered at once; | 8 For performance reasons, not every item in the list is rendered at once; |
| 9 instead a small subset of actual template elements *(enough to fill the viewport
)* | 9 instead a small subset of actual template elements *(enough to fill the viewport
)* |
| 10 are rendered and reused as the user scrolls. As such, it is important that all | 10 are rendered and reused as the user scrolls. As such, it is important that all |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 58 <div> | 58 <div> |
| 59 Name: <span>[[item.name]]</span> | 59 Name: <span>[[item.name]]</span> |
| 60 </div> | 60 </div> |
| 61 </template> | 61 </template> |
| 62 </iron-list> | 62 </iron-list> |
| 63 </template> | 63 </template> |
| 64 ``` | 64 ``` |
| 65 | 65 |
| 66 ### Resizing | 66 ### Resizing |
| 67 | 67 |
| 68 `iron-list` lays out the items when it recives a notification via the `resize` e
vent. | 68 `iron-list` lays out the items when it recives a notification via the `iron-resi
ze` event. |
| 69 This event is fired by any element that implements `IronResizableBehavior`. | 69 This event is fired by any element that implements `IronResizableBehavior`. |
| 70 | 70 |
| 71 By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will t
rigger | 71 By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will t
rigger |
| 72 this event automatically. If you hide the list manually (e.g. you use `display:
none`) | 72 this event automatically. If you hide the list manually (e.g. you use `display:
none`) |
| 73 you might want to implement `IronResizableBehavior` or fire this event manually
right | 73 you might want to implement `IronResizableBehavior` or fire this event manually
right |
| 74 after the list became visible again. e.g. | 74 after the list became visible again. e.g. |
| 75 | 75 |
| 76 ```js | 76 ```js |
| 77 document.querySelector('iron-list').fire('resize'); | 77 document.querySelector('iron-list').fire('iron-resize'); |
| 78 ``` |
| 79 |
| 80 ### Styling |
| 81 |
| 82 Use the `--iron-list-items-container` mixin to style the container of items, e.g
. |
| 83 |
| 84 ```css |
| 85 iron-list { |
| 86 --iron-list-items-container: { |
| 87 margin: auto; |
| 88 }; |
| 89 } |
| 78 ``` | 90 ``` |
| 79 | 91 |
| 80 ### When should `<iron-list>` be used? | 92 ### When should `<iron-list>` be used? |
| 81 | 93 |
| 82 `iron-list` should be used when a page has significantly more DOM nodes than the
ones visible on the screen. e.g. the page has 500 nodes, but only 20 are visibl
e at the time. This is why we refer to it as a `virtual` list. In this case, a `
dom-repeat` will still create 500 nodes which could slow down the web app, but `
iron-list` will only create 20. | 94 `iron-list` should be used when a page has significantly more DOM nodes than the
ones visible on the screen. e.g. the page has 500 nodes, but only 20 are visibl
e at the time. This is why we refer to it as a `virtual` list. In this case, a `
dom-repeat` will still create 500 nodes which could slow down the web app, but `
iron-list` will only create 20. |
| 83 | 95 |
| 84 However, having an `iron-list` does not mean that you can load all the data at o
nce. Say, you have a million records in the database, you want to split the data
into pages so you can bring a page at the time. The page could contain 500 item
s, and iron-list will only render 20. | 96 However, having an `iron-list` does not mean that you can load all the data at o
nce. Say, you have a million records in the database, you want to split the data
into pages so you can bring a page at the time. The page could contain 500 item
s, and iron-list will only render 20. |
| OLD | NEW |