Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(183)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-list/README.md

Issue 1401633002: Update Polymer from 1.1.4 -> 1.1.5 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: dzhioev@ review Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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.
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698