| 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 0cba5fe4d740c2bdaa4cc7f6a56894d8b2b03b54..33e8baddef74c3807fb1683144f0a320db0acbda 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
|
| @@ -25,11 +25,93 @@ 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 either be explicitly sized, or delegate scrolling to an
|
| +### Sizing iron-list
|
| +
|
| +`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).
|
|
|
| +#### Flexbox - [jsbin](http://jsbin.com/kokaki/edit?html,output)
|
| +
|
| +```html
|
| +<template is="x-list">
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + height: 100vh;
|
| + display: flex;
|
| + flex-direction: column;
|
| + }
|
| +
|
| + iron-list {
|
| + flex: 1 1 auto;
|
| + }
|
| + </style>
|
| +
|
| + <app-toolbar>App name</app-toolbar>
|
| + <iron-list items="[[items]]">
|
| + <template>
|
| + ...
|
| + </template>
|
| + </iron-list>
|
| +</template>
|
| +```
|
| +#### Explicit size - [jsbin](http://jsbin.com/pibefo/edit?html,output)
|
| +```html
|
| +<template is="x-list">
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + }
|
| +
|
| + iron-list {
|
| + height: 100vh; /* don't use % values unless the parent element is sized. */
|
| + }
|
| + </style>
|
| + <iron-list items="[[items]]">
|
| + <template>
|
| + ...
|
| + </template>
|
| + </iron-list>
|
| +</template>
|
| +```
|
| +#### Main document scrolling - [jsbin](http://jsbin.com/cojuli/edit?html,output)
|
| +```html
|
| +<head>
|
| + <style>
|
| + body {
|
| + height: 100vh;
|
| + margin: 0;
|
| + display: flex;
|
| + flex-direction: column;
|
| + }
|
| +
|
| + app-toolbar {
|
| + position: fixed;
|
| + top: 0;
|
| + left: 0;
|
| + right: 0;
|
| + }
|
| +
|
| + iron-list {
|
| + /* add padding since the app-toolbar is fixed at the top */
|
| + padding-top: 64px;
|
| + }
|
| + </style>
|
| +</head>
|
| +<body>
|
| + <template is="dom-bind">
|
| + <app-toolbar>App name</app-toolbar>
|
| + <iron-list target="document" items="[[items]]">
|
| + <template>
|
| + ...
|
| + </template>
|
| + </iron-list>
|
| + </template>
|
| +</body>
|
| +```
|
| +
|
| ### Template model
|
|
|
| List item templates should bind to template models of the following structure:
|
|
|
Chromium Code Reviews
Issue 2314283002:
Roll Polymer (Closed)
