Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1530)

Unified Diff: third_party/polymer/v1_0/components-chromium/iron-list/README.md

Issue 1681053002: Unrestrict version of PolymerElements/iron-list and update it (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@fix-closure
Patch Set: and vulcanize Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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
+
-->
[![Build Status](https://travis-ci.org/PolymerElements/iron-list.svg?branch=master)](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.

Powered by Google App Engine
This is Rietveld 408576698