oe-ui-misc
Version:
collection of miscellaneous oe-ui Polymer components
109 lines (94 loc) • 3.98 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>oe-breadcrumb demo</title>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
import '@polymer/iron-demo-helpers/demo-snippet';
import '@polymer/polymer/lib/elements/custom-style.js';
import '@polymer/iron-icon/iron-icon';
</script>
<script type="module" src="../oe-breadcrumb.js"></script>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic oe-breadcrumb demo</h3>
<demo-snippet id="snippet">
<template>
<oe-breadcrumb id="breadcrumb-2">
</oe-breadcrumb>
<script>
setTimeout(function () {
var data_1 = [
{ label: "Home", path: "/home" },
{ label: "Sub Level 1", path: "/sub1" },
{ label: "Sub Level 2", path: "/" }
];
var workflow = document.querySelector('#breadcrumb-2');
workflow.set('list', data_1);
}, 2000);
</script>
</template>
</demo-snippet>
<h3>Collapse oe-breadcrumb demo</h3>
<demo-snippet id="snippet">
<template>
<oe-breadcrumb id="breadcrumb-1">
</oe-breadcrumb>
<script>
setTimeout(function () {
var data = [
{ label: "Home", path: "/home" },
{ label: "Sub Level 1", path: "/sub1" },
{ label: "Sub Level 2", path: "/sub2" },
{ label: "Sub Level 3", path: "/sub3" },
{ label: "Sub Level 4", path: "/sub4" },
{ label: "Sub Level 5", path: "/" }
];
var workflow = document.querySelector('#breadcrumb-1');
workflow.set('list', data);
}, 2000);
</script>
</template>
</demo-snippet>
<h3>CSS oe-breadcrumb demo</h3>
<demo-snippet id="snippet">
<template>
<custom-style>
<style is="custom-style">
#breadcrumb-3 {
--oe-breadcrumb: {
margin: 6px;
display: block;
}
--breadcrumb-item-hover: {
background-color: yellow;
}
}
</style>
</custom-style>
<oe-breadcrumb id="breadcrumb-3">
</oe-breadcrumb>
<script>
setTimeout(function () {
var data_1 = [
{ label: "Home", path: "/home" },
{ label: "Sub Level 1", path: "/sub1" },
{ label: "Sub Level 2", path: "/" }
];
var workflow = document.querySelector('#breadcrumb-3');
workflow.set('list', data_1);
}, 2000);
</script>
</template>
</demo-snippet>
</div>
</body>
</html>