core-list.html revision 1320f92c476a1ad9d19dba2a48c72b75566198e9 
1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9
10<!--
11`core-list` displays a virtual, 'infinite' list. The template inside the 
12`core-list` element represents the dom to create for each list item. The
13`data` property specifies an array of list item data. The `height` property
14represents the height of a list item.
15
16By default, the list supports selection via tapping. Styling the selection 
17should be done via binding. The `selectedProperty` property is set on the 
18list view data for each selected item.
19
20`core-list` manages a viewport of data based on the current scroll position.
21For performance reasons, not every item in the list is rendered at once.
22
23    <core-list data="{{data}}" height="80">
24      <template>
25        <div class="{{ {selected: selected} | tokenList }}">List row: {{index}}</div>
26      </template>
27    </core-list>
28
29@group Polymer Core Elements
30@element core-list
31-->
32<link rel="import" href="/polymer/polymer.html">
33<link rel="import" href="/core-selection/core-selection.html">
34
35<polymer-element name="core-list" on-tap="{{tapHandler}}" assetpath="">
36<template>
37  <core-selection id="selection" multi="{{multi}}" on-core-select="{{selectedHandler}}"></core-selection>
38  <link rel="stylesheet" href="core-list.css">
39  <div id="viewport" class="core-list-viewport"><content></content></div>
40</template>
41
42</polymer-element>
43<script src="core-list-extracted.js"></script>