https://github.com/kcmr/resizable-panels
Web Component that allows to resize its childrens vertically or horizontally
https://github.com/kcmr/resizable-panels
polymer polymer2 resizable web-component
Last synced: 2 months ago
JSON representation
Web Component that allows to resize its childrens vertically or horizontally
- Host: GitHub
- URL: https://github.com/kcmr/resizable-panels
- Owner: kcmr
- License: mit
- Created: 2017-05-19T23:16:00.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-27T23:22:28.000Z (over 7 years ago)
- Last Synced: 2025-04-09T07:59:59.587Z (2 months ago)
- Topics: polymer, polymer2, resizable, web-component
- Language: HTML
- Homepage: https://kcmr.github.io/resizable-panels/
- Size: 1.55 MB
- Stars: 26
- Watchers: 4
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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
Lorem ipsum dolor…
Second panel
```
Vertical mode:
```html
Lorem ipsum dolor…
Second panel
Third panel
```
## 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:
```html
```
Import Custom Element:
```html
```
Use it!