@vaadin-component-factory/vcf-network
Version:
Hierarchical network visualizing web component
60 lines (59 loc) • 1.82 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>vcf-network demo</title>
<script replace src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script replace src="demo.js" type="module"></script>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
main {
opacity: 1;
transition: opacity 0.3s;
margin: auto;
max-width: 1200px;
}
main.hidden {
opacity: 0;
}
.src {
font-family: monospace;
}
p {
margin-top: 0;
}
vcf-network {
height: 500px;
}
</style>
</custom-style>
<script>
window.addEventListener('WebComponentsReady', () => document.querySelector('main').classList.remove('hidden'));
</script>
</head>
<body>
<main class="vertical-section-container hidden">
<h3>Default</h3>
<demo-snippet>
<template>
<vcf-network></vcf-network>
</template>
</demo-snippet>
<h3>Import Network</h3>
<p><strong>External file:</strong> <a href="network.json" class="src">network.json</a></p>
<demo-snippet>
<template>
<vcf-network data-src="./network.json" scale="2" collapsed></vcf-network>
</template>
</demo-snippet>
<h3>Import Templates</h3>
<p><strong>External file:</strong> <a href="templates.json" class="src">templates.json</a></p>
<demo-snippet>
<template>
<vcf-network template-src="./templates.json"></vcf-network>
</template>
</demo-snippet>
</main>
</body>
</html>