resizable-panels

Web Component that allows to resize its childrens vertically or horizontally

View larger

Close

[ 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:

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!

Links

• Online Demo
• Documentation
• View on GitHub
• GitHub Homepage
• Issue tracker
• License

Compatibility