| 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 9b3148af1bdf1440377fab2f5c748da6d9313be9..6737eea5a2d49815eaadbf7c097682158887c059 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
|
| @@ -8,6 +8,8 @@ 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">
|
| +<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
| +<link rel="import" href="../iron-scroll-target-behavior/iron-scroll-target-behavior.html">
|
|
|
| <!--
|
|
|
| @@ -32,12 +34,14 @@ layout means (e.g. the `flex` or `fit` classes).
|
|
|
| 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 */
|
| - }
|
| - }
|
| +```js
|
| +{
|
| + index: 0, // index in the item array
|
| + selected: false, // true if the current item is selected
|
| + tabIndex: -1, // a dynamically generated tabIndex for focus management
|
| + item: {} // user data corresponding to items[index]
|
| +}
|
| +```
|
|
|
| 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
|
| @@ -64,16 +68,33 @@ bound from the model object provided to the template scope):
|
| <iron-list items="[[data]]" as="item">
|
| <template>
|
| <div>
|
| - Name: <span>[[item.name]]</span>
|
| + Name: [[item.name]]
|
| </div>
|
| </template>
|
| </iron-list>
|
| </template>
|
| ```
|
|
|
| +### Accessibility
|
| +
|
| +`iron-list` automatically manages the focus state for the items. It also provides
|
| +a `tabIndex` property within the template scope that can be used for keyboard navigation.
|
| +For example, users can press the up and down keys to move to previous and next
|
| +items in the list:
|
| +
|
| +```html
|
| +<iron-list items="[[data]]" as="item">
|
| + <template>
|
| + <div tabindex$="[[tabIndex]]">
|
| + Name: [[item.name]]
|
| + </div>
|
| + </template>
|
| +</iron-list>
|
| +```
|
| +
|
| ### Styling
|
|
|
| -Use the `--iron-list-items-container` mixin to style the container of items, e.g.
|
| +You can use the `--iron-list-items-container` mixin to style the container of items:
|
|
|
| ```css
|
| iron-list {
|
| @@ -91,7 +112,7 @@ 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.
|
| +after the list became visible again. For example:
|
|
|
| ```js
|
| document.querySelector('iron-list').fire('iron-resize');
|
| @@ -104,7 +125,7 @@ visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at t
|
| 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.
|
| +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.
|
| @@ -114,6 +135,8 @@ will only render 20.
|
| @demo demo/index.html Simple list
|
| @demo demo/selection.html Selection of items
|
| @demo demo/collapse.html Collapsable items
|
| +@demo demo/scroll-threshold.html Scroll thesholds
|
| +
|
| -->
|
|
|
| </head><body><dom-module id="iron-list">
|
| @@ -121,14 +144,13 @@ will only render 20.
|
| <style>
|
| :host {
|
| display: block;
|
| + position: relative;
|
| }
|
|
|
| - :host(.has-scroller) {
|
| - overflow: auto;
|
| - }
|
| -
|
| - :host(:not(.has-scroller)) {
|
| - position: relative;
|
| + @media only screen and (-webkit-max-device-pixel-ratio: 1) {
|
| + :host {
|
| + will-change: transform;
|
| + }
|
| }
|
|
|
| #items {
|
|
|
Chromium Code Reviews
Issue 1681053002:
Unrestrict version of PolymerElements/iron-list and update it (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@fix-closure