| 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
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..3cd50be935851949b4e11c3b4662931073161e5a
|
| --- /dev/null
|
| +++ b/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html
|
| @@ -0,0 +1,128 @@
|
| +<!--
|
| +@license
|
| +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
| +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| +Code distributed by Google as part of the polymer project is also
|
| +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| +--><html><head><link rel="import" href="../polymer/polymer.html">
|
| +<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
|
| +
|
| +<!--
|
| +
|
| +`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.
|
| +
|
| +For performance reasons, not every item in the list is rendered at once;
|
| +instead a small subset of actual template elements *(enough to fill the viewport)*
|
| +are rendered and reused as the user scrolls. As such, it is important that all
|
| +state of the list template be bound to the model driving it, since the view may
|
| +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
|
| +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).
|
| +
|
| +### Template model
|
| +
|
| +List item templates should bind to template models of the following structure:
|
| +
|
| + {
|
| + 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
|
| +scope for the array.
|
| +
|
| +For example, given the following `data` array:
|
| +
|
| +##### data.json
|
| +
|
| + [
|
| + {"name": "Bob"},
|
| + {"name": "Tim"},
|
| + {"name": "Mike"}
|
| + ]
|
| +
|
| +The following code would render the list (note the name and checked properties are
|
| +bound from the model object provided to the template scope):
|
| +
|
| + <template is="dom-bind">
|
| + <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
|
| + <iron-list items="[[data]]" as="item">
|
| + <template>
|
| + <div>
|
| + Name: <span>[[item.name]]</span>
|
| + </div>
|
| + </template>
|
| + </iron-list>
|
| + </template>
|
| +
|
| +### Resizing
|
| +
|
| +`iron-list` lays out the items when it recives a notification via the `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
|
| +after the list became visible again. e.g.
|
| +
|
| + document.querySelector('iron-list').fire('resize');
|
| +
|
| +
|
| +@group Iron Element
|
| +@element iron-list
|
| +@demo demo/index.html
|
| +-->
|
| +
|
| +</head><body><dom-module id="iron-list">
|
| + <style>
|
| +
|
| + :host {
|
| + display: block;
|
| + }
|
| +
|
| + :host(.has-scroller) {
|
| + overflow: auto;
|
| + }
|
| +
|
| + :host(:not(.has-scroller)) {
|
| + position: relative;
|
| + }
|
| +
|
| + #items {
|
| + position: relative;
|
| + }
|
| +
|
| + #items > ::content > * {
|
| + width: 100%;
|
| + box-sizing: border-box;
|
| + position: absolute;
|
| + top: 0;
|
| + will-change: transform;
|
| + }
|
| +
|
| + </style>
|
| + <template>
|
| +
|
| + <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}">
|
| + </array-selector>
|
| +
|
| + <div id="items">
|
| + <content></content>
|
| + </div>
|
| +
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<script src="iron-list-extracted.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 1351623008:
MD Settings: Languages model for language pages (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@SingletonPrefs