third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html - Issue 2751523005: MD Settings: bump iron-list version.

Unified Diff: third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html

Issue 2751523005: MD Settings: bump iron-list version. (Closed)

Patch Set: Created 3 years, 9 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 side-by-side diff with in-line comments

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/iron-list/bower.json ('k') | third_party/polymer/v1_0/components-chromium/iron-list/iron-list-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html

diff --git a/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html b/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html

index 33e8baddef74c3807fb1683144f0a320db0acbda..a13d8b082d2e93b57d7f6fb4e14aab219529d3a5 100644

--- a/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html

+++ b/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html

@@ -48,11 +48,12 @@ layout means (e.g. the `flex` or `fit` classes).

flex: 1 1 auto;

}

</style>

<app-toolbar>App name</app-toolbar>

<iron-list items="[[items]]">

- ...

+ <div>

+ ...

+ </div>

</template>

</iron-list>

</template>

@@ -71,7 +72,9 @@ layout means (e.g. the `flex` or `fit` classes).

</style>

<iron-list items="[[items]]">

- ...

+ <div>

+ ...

+ </div>

</template>

</iron-list>

</template>

@@ -103,15 +106,20 @@ layout means (e.g. the `flex` or `fit` classes).

<body>

<app-toolbar>App name</app-toolbar>

- <iron-list target="document" items="[[items]]">

+ <iron-list scroll-target="document" items="[[items]]">

- ...

+ <div>

+ ...

+ </div>

</template>

</iron-list>

</template>

</body>

```

+`iron-list` must be given a `<template>` which contains exactly one element. In the examples

+above we used a `<div>`, but you can provide any element (including custom elements).

### Template model

List item templates should bind to template models of the following structure:

@@ -210,13 +218,13 @@ document.querySelector('iron-list').fire('iron-resize');

### When should `<iron-list>` be used?

`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.

+visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at a 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

+Say you have a million records in the database, you want to split the data into pages

+so you can bring in a page at the time. The page could contain 500 items, and iron-list

will only render 20.

@group Iron Element

@@ -230,7 +238,6 @@ will only render 20.

<style>

:host {

display: block;

- position: relative;

}

@media only screen and (-webkit-max-device-pixel-ratio: 1) {

@@ -246,7 +253,7 @@ will only render 20.

:host(:not([grid])) #items > ::content > * {

width: 100%;

- };

+ }

#items > ::content > * {

box-sizing: border-box;