resizable-panels:
[ This description is mirrored from README.md at github.com/kcmr/resizable-panels on 2019-05-22 ]
resizable-panels
<resizable-panels> allows to resize the width (default) or the height (vertical mode) of the component childrens.
<resizable-panels>
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p2">Second panel</div>
</resizable-panels>
Vertical mode:
<resizable-panels vertical>
<div>Lorem ipsum dolor…</div>
<div>Second panel</div>
<div>Third panel</div>
</resizable-panels>
Events
resizing:
Fired when the panels are resized and when the resize ends.
@param {Object} detail { state: start|end }
Styling
The following custom CSS properties are available for styling:
| Custom property | Description | Default |
|---|---|---|
| –resizable-panels-knob-size | width (default) or height of the knobs | 4px |
| –resizable-panels-knob-color | background color of the knobs | #fff |
| –resizable-panels-knob | Mixin applied to the knob | {} |
Demo
Install
Install the component using Bower:
$ bower i -S kcmr/resizable-panels
Usage
Import Web Components polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Import Custom Element:
<link rel="import" href="bower_components/resizable-panels/resizable-panels.html">
Use it!