Contact us Create app

Directory

← Back

resizable-panels

Web Component that allows to resize its childrens vertically or horizontally

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/kcmr/resizable-panels on 2019-05-22 ]

resizable-panels

Published on webcomponents.org Component's Demo

<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

Demo and API docs

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!

Compatibility

(Loading compatibility data...)

Last updated: 2017-09-01

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

resizable-panels - Vaadin Add-on Directory

Web Component that allows to resize its childrens vertically or horizontally resizable-panels - Vaadin Add-on Directory
**[ 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 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/kcmr/resizable-panels) [![Component's Demo](resizable-panels.png)](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: ```js ``` Import Custom Element: ```html ``` Use it!
Online