@hpcc-js/wc-layout
v0.4.12
Published
hpcc-systems web component layout library
Downloads
115
Readme
@hpcc-js/wc-layout
@hpcc-js/wc-layout is a Web Component library to simplify advanced layouts in HTML.
Installing
For use with Webpack, Rollup, or other Node-based bundlers, @hpcc-js/wc-layout is typically installed via a package manager such as Yarn or npm. (@hpcc-js/wc-layout is distributed primarily as an ES module.)
npm install --save @hpcc-js/wc-layout@hpcc-js/wc-layout can then be imported as a namespace:
import * as layout from "@hpcc-js/wc-layout";In vanilla HTML, @hpcc-js/wc-layout can be imported as an ES module, say from Skypack:
<script type="module">
import * as layout from "https://cdn.skypack.dev/@hpcc-js/wc-layout";
document.body.innerHTML("<hpcc-splitpanel>...</hpcc-splitpanel>");
</script>
<hpcc-splitpanel orientation="horizontal" style="width:100%;height:400px">
...
</<hpcc-splitpanel>
@hpcc-js/wc-layout is also available as a UMD bundle for legacy browsers.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hpcc-js/common/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wc-layout"></script>
</head>
<body>
<h1>Splitters</h1>
<hpcc-splitpanel orientation="horizontal" style="width:100%;height:400px">
<div style="overflow:auto;min-width:48px">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>
<hpcc-splitpanel orientation="vertical" style="width:100%;height:100%;border:0px;padding:0px;min-width:48px">
<div style="overflow:auto;min-height:48px">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
<div style="overflow:auto;min-height:48px">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</hpcc-splitpanel>
</hpcc-splitpanel>
</body>