oe-ui-misc
Version:
collection of miscellaneous oe-ui Polymer components
214 lines (195 loc) • 7.46 kB
HTML
<!--
©2018-2019 EdgeVerve Systems Limited (a fully owned Infosys subsidiary),
Bangalore, India. All Rights Reserved.
-->
<html>
<head>
<title>oe-widget-container demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="../oe-widget-container.js"></script>
<script type="module">
import "@polymer/iron-demo-helpers/demo-pages-shared-styles.js";
import "@polymer/iron-demo-helpers/demo-snippet.js";
import "@polymer/paper-card/paper-card.js";
import "@polymer/polymer/lib/elements/custom-style";
import '@polymer/polymer/lib/elements/dom-bind.js';
import 'oe-data-table/oe-data-table.js';
</script>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container {
max-width: 600px;
}
paper-card:hover {
@apply --shadow-elevation-16dp;
}
paper-card {
--paper-card-background-color: #ffc800;
}
#custom {
--custom-variable-1: lightgreen;
--custom-mixin-1:{
padding: 8px;
border: 2px dashed red;
};
}
</style>
</custom-style>
<body>
<h3>Basic Fixed Widgets</h3>
<demo-snippet>
<template>
<oe-widget-container auto-arrange>
<paper-card class="widget-element draggable" data-row=0 data-col=1 data-width=1 data-height=1 name="card1" heading="Card 1">
<div class="card-content">
row 1 x col 1
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=1 data-col=2 data-width=2 data-height=1 name="card2" heading="Card 2">
<div class="card-content">
row 1 x col 2
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=2 data-col=1 data-width=2 data-height=1 name="card3" heading="Card 3">
<div class="card-content">
row 2 x col 1
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=0 data-col=3 data-width=1 data-height=1 name="card4" heading="Card 4">
<div class="card-content">
row 2 x col 4
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
</div>
</paper-card>
</oe-widget-container>
</template>
</demo-snippet>
<h3>Resizable</h3>
<demo-snippet>
<template>
<oe-widget-container enable-resizing>
<paper-card class="widget-element draggable" data-row=0 data-col=1 data-width=1 data-height=1 name="card1" heading="Card 1">
<div class="card-content">
row 1 x col 1
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=0 data-col=2 data-width=2 data-height=1 name="card2" heading="Card 2">
<div class="card-content">
row 1 x col 2
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=1 data-col=1 data-width=2 data-height=1 name="card3" heading="Card 3">
<div class="card-content">
row 2 x col 1
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=2 data-col=3 data-width=1 data-height=1 name="card4" heading="Card 4">
<div class="card-content">
row 2 x col 4
</div>
</paper-card>
</oe-widget-container>
</template>
</demo-snippet>
<h3>Dragging enabled</h3>
<demo-snippet>
<template>
<oe-widget-container enable-dragging>
<paper-card class="widget-element draggable" data-row=1 data-col=1 data-width=1 data-height=1 name="card1" heading="Card 1">
<div class="card-content">
row 1 x col 1
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=0 data-col=2 data-width=2 data-height=1 name="card2" heading="Card 2">
<div class="card-content">
row 1 x col 2
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=0 data-col=1 data-width=2 data-height=1 name="card3" heading="Card 3">
<div class="card-content">
row 2 x col 1
</div>
</paper-card>
<paper-card class="widget-element draggable" data-row=2 data-col=3 data-width=1 data-height=1 name="card4" heading="Card 4">
<div class="card-content">
row 2 x col 4
</div>
</paper-card>
</oe-widget-container>
</template>
</demo-snippet>
<h3>Auto Rearrange Rows and Columns</h3>
<demo-snippet>
<template>
<oe-widget-container enable-resizing auto-arrange enable-dragging config='{"columns":4,"media":[{"query":"(max-width: 600px)","config":{"columns":2}},{"query":"(max-width: 400px)","config":{"columns":1}}]}'>
<div class="widget-element" data-width=1 data-height=2 style="overflow: auto">
<oe-data-table id="simple-table" label="Simple Table" name="datatable" ></oe-data-table>
</div>
<paper-card class="widget-element draggable" data-width=3 data-height=1 name="card2" heading="Card 2">
<div class="card-content">
row 1 x col 2
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
</div>
</paper-card>
<paper-card class="widget-element draggable" data-width=2 data-height=1 name="card3" heading="Card 3">
<div class="card-content">
row 2 x col 1
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
</div>
</paper-card>
<paper-card class="widget-element draggable" data-width=1 data-height=2 name="card4" heading="Card 4">
<div class="card-content">
row 2 x col 4
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
</div>
</paper-card>
</oe-widget-container>
<script>
var dataTable = document.getElementById('simple-table');
dataTable.set('columns', [{
key: 'id',
label: 'Id',
type: 'number'
}, {
key: 'name',
label: 'Name',
type: 'string'
}]);
dataTable.set('items', [{
id: 1,
name: 'Admin'
}, {
id: 2,
name: 'Developer'
}, {
id: 3,
name: 'Designer'
}, {
id: 4,
name: 'Tester'
}]);
</script>
</template>
</demo-snippet>
</body>
</html>