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

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

Issue 1468623004: Update Polymer from 1.2.1 -> 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@travis-yml
Patch Set: local-state.html Created 5 years, 1 month 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
2 ========================
3 1
4 `iron-list` displays a virtual, *'infinite'* list. The template inside 2 <!---
3
4 This README is automatically generated from the comments in these files:
5 iron-list.html
6
7 Edit those files, and our readme bot will duplicate them over here!
8 Edit this file, and the bot will squash your changes :)
9
10 -->
11
12 [![Build Status](https://travis-ci.org/PolymerElements/iron-list.svg?branch=mast er)](https://travis-ci.org/PolymerElements/iron-list)
13
14 _[Demo and API Docs](https://elements.polymer-project.org/elements/iron-list)_
15
16
17 ##&lt;iron-list&gt;
18
19
20
21 `iron-list` displays a virtual, 'infinite' list. The template inside
5 the iron-list element represents the DOM to create for each list item. 22 the iron-list element represents the DOM to create for each list item.
6 The `items` property specifies an array of list item data. 23 The `items` property specifies an array of list item data.
7 24
8 For performance reasons, not every item in the list is rendered at once; 25 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 )* 26 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 27 are rendered and reused as the user scrolls. As such, it is important that all
11 state of the list template be bound to the model driving it, since the view may 28 state of the list template be bound to the model driving it, since the view may
12 be reused with a new model at any time. Particularly, any state that may change 29 be reused with a new model at any time. Particularly, any state that may change
13 as the result of a user interaction with the list item must be bound to the mode l 30 as the result of a user interaction with the list item must be bound to the mode l
14 to avoid view state inconsistency. 31 to avoid view state inconsistency.
15 32
16 __Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling to an 33 __Important:__ `iron-list` must either be explicitly sized, or delegate scrollin g to an
17 explicitly sized parent. By "explicitly sized", we mean it either has an explici t 34 explicitly sized parent. By "explicitly sized", we mean it either has an explici t
18 CSS `height` property set via a class or inline style, or else is sized by other 35 CSS `height` property set via a class or inline style, or else is sized by other
19 layout means (e.g. the `flex` or `fit` classes). 36 layout means (e.g. the `flex` or `fit` classes).
20 37
21 ### Template model 38 ### Template model
22 39
23 List item templates should bind to template models of the following structure: 40 List item templates should bind to template models of the following structure:
24 41
25 ```js 42 {
26 { 43 index: 0, // data index for this item
27 index: 0, // data index for this item 44 item: { // user data corresponding to items[index]
28 item: { // user data corresponding to items[index] 45 /* user item data */
29 /* user item data */ 46 }
30 } 47 }
31 }
32 ```
33 48
34 Alternatively, you can change the property name used as data index by changing t he 49 Alternatively, you can change the property name used as data index by changing t he
35 `indexAs` property. The `as` property defines the name of the variable to add to the binding 50 `indexAs` property. The `as` property defines the name of the variable to add to the binding
36 scope for the array. 51 scope for the array.
37 52
38 For example, given the following `data` array: 53 For example, given the following `data` array:
39 54
40 ##### data.json 55 ##### data.json
41 56
42 ```js 57 ```js
(...skipping 13 matching lines...) Expand all
56 <iron-list items="[[data]]" as="item"> 71 <iron-list items="[[data]]" as="item">
57 <template> 72 <template>
58 <div> 73 <div>
59 Name: <span>[[item.name]]</span> 74 Name: <span>[[item.name]]</span>
60 </div> 75 </div>
61 </template> 76 </template>
62 </iron-list> 77 </iron-list>
63 </template> 78 </template>
64 ``` 79 ```
65 80
66 ### Resizing
67
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`.
70
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`)
73 you might want to implement `IronResizableBehavior` or fire this event manually right
74 after the list became visible again. e.g.
75
76 ```js
77 document.querySelector('iron-list').fire('iron-resize');
78 ```
79
80 ### Styling 81 ### Styling
81 82
82 Use the `--iron-list-items-container` mixin to style the container of items, e.g . 83 Use the `--iron-list-items-container` mixin to style the container of items, e.g .
83 84
84 ```css 85 ```css
85 iron-list { 86 iron-list {
86 --iron-list-items-container: { 87 --iron-list-items-container: {
87 margin: auto; 88 margin: auto;
88 }; 89 };
89 } 90 }
90 ``` 91 ```
91 92
93 ### Resizing
94
95 `iron-list` lays out the items when it receives a notification via the `iron-res ize` event.
96 This event is fired by any element that implements `IronResizableBehavior`.
97
98 By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will t rigger
99 this event automatically. If you hide the list manually (e.g. you use `display: none`)
100 you might want to implement `IronResizableBehavior` or fire this event manually right
101 after the list became visible again. e.g.
102
103 ```js
104 document.querySelector('iron-list').fire('iron-resize');
105 ```
106
92 ### When should `<iron-list>` be used? 107 ### When should `<iron-list>` be used?
93 108
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. 109 `iron-list` should be used when a page has significantly more DOM nodes than the ones
110 visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at t he time.
111 This is why we refer to it as a `virtual` list. In this case, a `dom-repeat` wil l still
112 create 500 nodes which could slow down the web app, but `iron-list` will only cr eate 20.
95 113
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. 114 However, having an `iron-list` does not mean that you can load all the data at o nce.
115 Say, you have a million records in the database, you want to split the data into pages
116 so you can bring a page at the time. The page could contain 500 items, and iron- list
117 will only render 20.
118
119
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698