resizable-panels - Vaadin Add-on Directory
Web Component that allows to resize its childrens vertically or horizontally
**[ This description is mirrored from README.md at [github.com/kcmr/resizable-panels](https://github.com//kcmr/resizable-panels/blob/v2.0.4/README.md) on 2019-05-22 ]**
# resizable-panels
[](https://www.webcomponents.org/element/kcmr/resizable-panels)
[](https://kcmr.github.io/resizable-panels/components/resizable-panels/demo/index.html)
`` allows to resize the width (default) or the height (vertical mode) of the component childrens.
```html
```
Vertical mode:
```html
```
## 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
[Demo and API docs](https://kcmr.github.io/resizable-panels/components/resizable-panels/)
## Install
Install the component using [Bower](http://bower.io/):
```bash
$ bower i -S kcmr/resizable-panels
```
## Usage
Import Web Components polyfill:
```js
```
Import Custom Element:
```html
```
Use it!
Lorem ipsum dolor…
Second panel
Lorem ipsum dolor…
Second panel
Third panel