| OLD | NEW |
|---|
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --><html><head><link rel="import" href="../polymer/polymer.html"> | 9 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> | 10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 68 <iron-list items="[[data]]" as="item"> | 68 <iron-list items="[[data]]" as="item"> |
| 69 <template> | 69 <template> |
| 70 <div> | 70 <div> |
| 71 Name: [[item.name]] | 71 Name: [[item.name]] |
| 72 </div> | 72 </div> |
| 73 </template> | 73 </template> |
| 74 </iron-list> | 74 </iron-list> |
| 75 </template> | 75 </template> |
| 76 ``` | 76 ``` |
| 77 | 77 |
| 78 ### Grid layout |
| 79 |
| 80 `iron-list` supports a grid layout in addition to linear layout by setting |
| 81 the `grid` attribute. In this case, the list template item must have both fixed |
| 82 width and height (e.g. via CSS). Based on this, the number of items |
| 83 per row are determined automatically based on the size of the list viewport. |
| 84 |
| 78 ### Accessibility | 85 ### Accessibility |
| 79 | 86 |
| 80 `iron-list` automatically manages the focus state for the items. It also provide
s | 87 `iron-list` automatically manages the focus state for the items. It also provide
s |
| 81 a `tabIndex` property within the template scope that can be used for keyboard na
vigation. | 88 a `tabIndex` property within the template scope that can be used for keyboard na
vigation. |
| 82 For example, users can press the up and down keys to move to previous and next | 89 For example, users can press the up and down keys to move to previous and next |
| 83 items in the list: | 90 items in the list: |
| 84 | 91 |
| 85 ```html | 92 ```html |
| 86 <iron-list items="[[data]]" as="item"> | 93 <iron-list items="[[data]]" as="item"> |
| 87 <template> | 94 <template> |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 129 Say, you have a million records in the database, you want to split the data into
pages | 136 Say, you have a million records in the database, you want to split the data into
pages |
| 130 so you can bring a page at the time. The page could contain 500 items, and iron-
list | 137 so you can bring a page at the time. The page could contain 500 items, and iron-
list |
| 131 will only render 20. | 138 will only render 20. |
| 132 | 139 |
| 133 @group Iron Element | 140 @group Iron Element |
| 134 @element iron-list | 141 @element iron-list |
| 135 @demo demo/index.html List of cards | 142 @demo demo/index.html List of cards |
| 136 @demo demo/selection.html Items selection | 143 @demo demo/selection.html Items selection |
| 137 @demo demo/collapse.html Collapsable items | 144 @demo demo/collapse.html Collapsable items |
| 138 @demo demo/scroll-threshold.html Scroll thesholds | 145 @demo demo/scroll-threshold.html Scroll thesholds |
| 146 @demo demo/grid.html Grid layout |
| 139 @demo demo/basic.html Basic list | 147 @demo demo/basic.html Basic list |
| 140 | 148 |
| 141 --> | 149 --> |
| 142 | 150 |
| 143 </head><body><dom-module id="iron-list"> | 151 </head><body><dom-module id="iron-list"> |
| 144 <template> | 152 <template> |
| 145 <style> | 153 <style> |
| 146 :host { | 154 :host { |
| 147 display: block; | 155 display: block; |
| 148 position: relative; | 156 position: relative; |
| 149 } | 157 } |
| 150 | 158 |
| 151 @media only screen and (-webkit-max-device-pixel-ratio: 1) { | 159 @media only screen and (-webkit-max-device-pixel-ratio: 1) { |
| 152 :host { | 160 :host { |
| 153 will-change: transform; | 161 will-change: transform; |
| 154 } | 162 } |
| 155 } | 163 } |
| 156 | 164 |
| 157 #items { | 165 #items { |
| 158 @apply(--iron-list-items-container); | 166 @apply(--iron-list-items-container); |
| 159 position: relative; | 167 position: relative; |
| 160 } | 168 } |
| 161 | 169 |
| 170 :host(:not([grid])) #items > ::content > * { |
| 171 width: 100%; |
| 172 }; |
| 173 |
| 162 #items > ::content > * { | 174 #items > ::content > * { |
| 163 width: 100%; | |
| 164 box-sizing: border-box; | 175 box-sizing: border-box; |
| 176 margin: 0; |
| 165 position: absolute; | 177 position: absolute; |
| 166 top: 0; | 178 top: 0; |
| 167 will-change: transform; | 179 will-change: transform; |
| 168 } | 180 } |
| 169 </style> | 181 </style> |
| 170 | 182 |
| 171 <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}"
selected-item="{{selectedItem}}"> | 183 <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}"
selected-item="{{selectedItem}}"> |
| 172 </array-selector> | 184 </array-selector> |
| 173 | 185 |
| 174 <div id="items"> | 186 <div id="items"> |
| 175 <content></content> | 187 <content></content> |
| 176 </div> | 188 </div> |
| 177 | 189 |
| 178 </template> | 190 </template> |
| 179 </dom-module> | 191 </dom-module> |
| 180 | 192 |
| 181 <script src="iron-list-extracted.js"></script></body></html> | 193 <script src="iron-list-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1901343004:
[Polymer] update third_party polymer (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master