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

Unified 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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v1_0/components-chromium/iron-list/README.md
diff --git a/third_party/polymer/v1_0/components-chromium/iron-list/README.md b/third_party/polymer/v1_0/components-chromium/iron-list/README.md
index caf68195f753b5d22a132785c83123cb06524826..1b31769aaed70e97bb70833242de261fbac1e0d6 100644
--- a/third_party/polymer/v1_0/components-chromium/iron-list/README.md
+++ b/third_party/polymer/v1_0/components-chromium/iron-list/README.md
@@ -1,7 +1,24 @@
-iron-list
-========================
-`iron-list` displays a virtual, *'infinite'* list. The template inside
+<!---
+
+This README is automatically generated from the comments in these files:
+iron-list.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+-->
+
+[![Build Status](https://travis-ci.org/PolymerElements/iron-list.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-list)
+
+_[Demo and API Docs](https://elements.polymer-project.org/elements/iron-list)_
+
+
+##&lt;iron-list&gt;
+
+
+
+`iron-list` displays a virtual, 'infinite' list. The template inside
the iron-list element represents the DOM to create for each list item.
The `items` property specifies an array of list item data.
@@ -13,7 +30,7 @@ be reused with a new model at any time. Particularly, any state that may change
as the result of a user interaction with the list item must be bound to the model
to avoid view state inconsistency.
-__Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling to an
+__Important:__ `iron-list` must either be explicitly sized, or delegate scrolling to an
explicitly sized parent. By "explicitly sized", we mean it either has an explicit
CSS `height` property set via a class or inline style, or else is sized by other
layout means (e.g. the `flex` or `fit` classes).
@@ -22,14 +39,12 @@ layout means (e.g. the `flex` or `fit` classes).
List item templates should bind to template models of the following structure:
-```js
-{
- index: 0, // data index for this item
- item: { // user data corresponding to items[index]
- /* user item data */
- }
-}
-```
+ {
+ index: 0, // data index for this item
+ item: { // user data corresponding to items[index]
+ /* user item data */
+ }
+ }
Alternatively, you can change the property name used as data index by changing the
`indexAs` property. The `as` property defines the name of the variable to add to the binding
@@ -63,34 +78,42 @@ bound from the model object provided to the template scope):
</template>
```
+### Styling
+
+Use the `--iron-list-items-container` mixin to style the container of items, e.g.
+
+```css
+iron-list {
+ --iron-list-items-container: {
+ margin: auto;
+ };
+}
+```
+
### Resizing
-`iron-list` lays out the items when it recives a notification via the `iron-resize` event.
+`iron-list` lays out the items when it receives a notification via the `iron-resize` event.
This event is fired by any element that implements `IronResizableBehavior`.
By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
this event automatically. If you hide the list manually (e.g. you use `display: none`)
-you might want to implement `IronResizableBehavior` or fire this event manually right
+you might want to implement `IronResizableBehavior` or fire this event manually right
after the list became visible again. e.g.
```js
document.querySelector('iron-list').fire('iron-resize');
```
-### Styling
-
-Use the `--iron-list-items-container` mixin to style the container of items, e.g.
+### When should `<iron-list>` be used?
-```css
-iron-list {
- --iron-list-items-container: {
- margin: auto;
- };
-}
-```
+`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 visible 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.
-### When should `<iron-list>` be used?
+However, having an `iron-list` does not mean that you can load all the data at once.
+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 items, and iron-list
+will only render 20.
-`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 visible 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.
-However, having an `iron-list` does not mean that you can load all the data at once. 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 items, and iron-list will only render 20.

Powered by Google App Engine
This is Rietveld 408576698