add iron-list
This commit is contained in:
parent
396b125d66
commit
da7c9a4899
47 changed files with 36356 additions and 0 deletions
102
dashboard-ui/bower_components/iron-list/test/x-list.html
vendored
Normal file
102
dashboard-ui/bower_components/iron-list/test/x-list.html
vendored
Normal file
|
@ -0,0 +1,102 @@
|
|||
<!--
|
||||
@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-list">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-fit);
|
||||
@apply(--layout-vertical);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.item:nth-child(odd) {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.item:nth-child(even) {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
iron-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<iron-list style$="[[_computedListHeight(listHeight)]]" items="[[data]]" as="item" id="list">
|
||||
<template>
|
||||
<div class="item">
|
||||
<div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[primitive]]">[[item.index]]</div>
|
||||
<div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[!primitive]]">[[item]]</div>
|
||||
</div>
|
||||
</template>
|
||||
</iron-list>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-list',
|
||||
|
||||
properties: {
|
||||
data: {
|
||||
type: Array
|
||||
},
|
||||
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
|
||||
listHeight: {
|
||||
type: Number,
|
||||
value: 300
|
||||
},
|
||||
|
||||
pre: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
primitive: {
|
||||
value: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
|
||||
get list() {
|
||||
return this.$.list;
|
||||
},
|
||||
|
||||
_computedItemHeight: function(item) {
|
||||
var css = this.pre ? 'white-space:pre;' : '';
|
||||
if (item.height) {
|
||||
css += this.itemHeight === 0 ? '' : 'height: ' + (item.height) + 'px;';
|
||||
} else if (this.itemHeight) {
|
||||
css += 'height: ' + (this.itemHeight) + 'px;';
|
||||
}
|
||||
return css;
|
||||
},
|
||||
|
||||
_computedListHeight: function(listHeight) {
|
||||
return 'height: ' + (listHeight) + 'px;';
|
||||
}
|
||||
});
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue