resizable-panels
Web Component that allows to resize its childrens vertically or horizontally
[ 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!
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#1.9 - 2
- Released
- 2017-09-01
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 1.0.0
- Browser
- Browser Independent