jellyfin-web/dashboard-ui/bower_components/iron-list/test/x-grid.html
Luke Pulverenti da7c9a4899 add iron-list
2016-04-20 23:34:52 -04:00

82 lines
1.8 KiB
HTML

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-list.html">
<dom-module id="x-grid">
<style>
:host {
@apply(--layout-fit);
@apply(--layout-vertical);
display: block;
}
iron-list {
overflow: hidden;
}
</style>
<template>
<iron-list style$="[[_computedListSize(listSize)]]" items="[[data]]" as="item" id="list" grid>
<template>
<div class="item">
<div style$="[[_computeItemSize(item)]]">[[item.index]]</div>
</div>
</template>
</iron-list>
</template>
</dom-module>
<script>
Polymer({
is: 'x-grid',
properties: {
data: {
type: Array
},
itemSize: {
type: Number,
value: 100
},
listSize: {
type: Number,
value: 300
},
pre: {
type: Boolean
},
},
get list() {
return this.$.list;
},
_computeItemSize: function(item) {
var css = this.pre ? 'white-space:pre;' : '';
css += 'height: ' + (this.itemSize) + 'px;';
css += 'width: ' + (this.itemSize) + 'px;';
return css;
},
_computedListSize: function(listHeight) {
return 'height: ' + (listHeight) + 'px;' + 'width: ' + (listHeight) + 'px;';
}
});
</script>