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