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 1b31769aaed70e97bb70833242de261fbac1e0d6..45dba7081ec3a8f076af3ef43fe09b0d8fe86a9b 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 |
@@ -7,6 +7,9 @@ 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 :) |
+The bot does some handling of markdown. Please file a bug if it does the wrong |
+thing! https://github.com/PolymerLabs/tedium/issues |
+ |
--> |
[](https://travis-ci.org/PolymerElements/iron-list) |
@@ -16,8 +19,6 @@ _[Demo and API Docs](https://elements.polymer-project.org/elements/iron-list)_ |
##<iron-list> |
- |
- |
`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. |
@@ -39,12 +40,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 |
@@ -71,16 +74,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 { |
@@ -98,7 +118,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'); |
@@ -111,7 +131,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. |