| Index: third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html b/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html
|
| index 3cd50be935851949b4e11c3b4662931073161e5a..01661d002908683d3ff1bf872e3be30b1ea7b41d 100644
|
| --- a/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html
|
| +++ b/third_party/polymer/v1_0/components-chromium/iron-list/iron-list.html
|
| @@ -67,9 +67,19 @@ bound from the model object provided to the template scope):
|
| </iron-list>
|
| </template>
|
|
|
| +### Styling
|
| +
|
| +Use the `--iron-list-items-container` mixin to style the container of items, e.g.
|
| +
|
| + iron-list {
|
| + --iron-list-items-container: {
|
| + margin: auto;
|
| + };
|
| + }
|
| +
|
| ### Resizing
|
|
|
| -`iron-list` lays out the items when it recives a notification via the `resize` event.
|
| +`iron-list` lays out the items when it recives a notification via the `iron-resize` event.
|
| This event is fired by any element that implements `IronResizableBehavior`.
|
|
|
| By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
|
| @@ -77,43 +87,44 @@ this event automatically. If you hide the list manually (e.g. you use `display:
|
| you might want to implement `IronResizableBehavior` or fire this event manually right
|
| after the list became visible again. e.g.
|
|
|
| - document.querySelector('iron-list').fire('resize');
|
| + document.querySelector('iron-list').fire('iron-resize');
|
|
|
|
|
| @group Iron Element
|
| @element iron-list
|
| -@demo demo/index.html
|
| +@demo demo/index.html Simple list
|
| +@demo demo/selection.html Selection of items
|
| +@demo demo/collapse.html Collapsable items
|
| -->
|
|
|
| </head><body><dom-module id="iron-list">
|
| - <style>
|
| -
|
| - :host {
|
| - display: block;
|
| - }
|
| -
|
| - :host(.has-scroller) {
|
| - overflow: auto;
|
| - }
|
| -
|
| - :host(:not(.has-scroller)) {
|
| - position: relative;
|
| - }
|
| -
|
| - #items {
|
| - position: relative;
|
| - }
|
| -
|
| - #items > ::content > * {
|
| - width: 100%;
|
| - box-sizing: border-box;
|
| - position: absolute;
|
| - top: 0;
|
| - will-change: transform;
|
| - }
|
| -
|
| - </style>
|
| <template>
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + }
|
| +
|
| + :host(.has-scroller) {
|
| + overflow: auto;
|
| + }
|
| +
|
| + :host(:not(.has-scroller)) {
|
| + position: relative;
|
| + }
|
| +
|
| + #items {
|
| + @apply(--iron-list-items-container);
|
| + position: relative;
|
| + }
|
| +
|
| + #items > ::content > * {
|
| + width: 100%;
|
| + box-sizing: border-box;
|
| + position: absolute;
|
| + top: 0;
|
| + will-change: transform;
|
| + }
|
| + </style>
|
|
|
| <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}">
|
| </array-selector>
|
|
|