resizable-panels | Vaadin

Web Component that allows to resize its childrens vertically or horizontally

[ This description is mirrored from at on 2019-05-22 ]


Published on Component's Demo

<resizable-panels> allows to resize the width (default) or the height (vertical mode) of the component childrens.

  <div class="panel p1">Lorem ipsum dolor…</div>
  <div class="panel p2">Second panel</div>

Vertical mode:

<resizable-panels vertical>
  <div>Lorem ipsum dolor…</div>
  <div>Second panel</div>
  <div>Third panel</div>


  • resizing: Fired when the panels are resized and when the resize ends.
    @param {Object} detail { state: start|end }


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 and API docs


Install the component using Bower:

$ bower i -S kcmr/resizable-panels


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!


Link to this version
ImportedReleased 01 September 2017Other
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (1.0.0)
Browser Compatibility
Install with
bower install --save kcmr/resizable-panels"#1.1.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.1.0


  • polymer#Polymer/polymer#1.9 - 2