GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → kcmr → resizable-panels

kcmr / resizable-panels

Licence: MIT license
Web Component that allows to resize its childrens vertically or horizontally

Programming Languages

HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Labels

web-componentpolymerresizablepolymer2

Projects that are alternatives of or similar to resizable-panels

vaadin-dialog
High quality web component for modal dialogs. Part of the Vaadin platform.
Stars: ✭ 15 (-16.67%)
Mutual labels:  web-component, polymer, polymer2
vaadin-split-layout
The Web Component which allows you to partition a layout into resizeable areas. Part of the Vaadin components.
Stars: ✭ 40 (+122.22%)
Mutual labels:  web-component, polymer, polymer2
vaadin-icons
Vaadin Icons is a collection of 600+ unique icons designed for web applications
Stars: ✭ 59 (+227.78%)
Mutual labels:  web-component, polymer, polymer2
polymer-linter
Moved to Polymer/tools monorepo
Stars: ✭ 34 (+88.89%)
Mutual labels:  web-component, polymer
Vaadin Combo Box
The Web Component for displaying a list of items with filtering. Part of the Vaadin components.
Stars: ✭ 113 (+527.78%)
Mutual labels:  web-component, polymer
paper-countries
Select Dropdown with list of countries with flags and autocomplete
Stars: ✭ 16 (-11.11%)
Mutual labels:  web-component, polymer
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (+16.67%)
Mutual labels:  polymer, polymer2
obvi
A Polymer 3+ webcomponent / button for doing speech recognition
Stars: ✭ 54 (+200%)
Mutual labels:  polymer, polymer2
bwt-datatable
Data table with Polymer 3 support!
Stars: ✭ 43 (+138.89%)
Mutual labels:  web-component, polymer
Vaadin Date Picker
The Web Component providing a date selection field with scrollable month calendar. Part of the Vaadin components.
Stars: ✭ 158 (+777.78%)
Mutual labels:  web-component, polymer
Paper Timezone
Polymer based timezone selection component
Stars: ✭ 19 (+5.56%)
Mutual labels:  web-component, polymer
Vidyano
Vidyano Web²
Stars: ✭ 29 (+61.11%)
Mutual labels:  web-component, polymer
Polymer Redux
Polymer bindings for Redux.
Stars: ✭ 450 (+2400%)
Mutual labels:  web-component, polymer
Vaadin Form Layout
The Web Component providing configurable responsive layout for form elements. Part of the Vaadin components.
Stars: ✭ 15 (-16.67%)
Mutual labels:  web-component, polymer
vaadin-context-menu
The responsive Web Component for showing context dependent items for any element on the page. Part of the Vaadin components.
Stars: ✭ 26 (+44.44%)
Mutual labels:  polymer, polymer2
Geo Location
Web component element for the Geolocation API
Stars: ✭ 86 (+377.78%)
Mutual labels:  web-component, polymer
paper-chip
A chip web component made with Polymer 2 following Material Design guidelines
Stars: ✭ 30 (+66.67%)
Mutual labels:  polymer, polymer2
mapbox-gl
Polymer 2.0 custom element for mapbox-gl-js. Uses WebGL to render interactive maps from vector tiles and Mapbox styles - compatible with deck-gl.
Stars: ✭ 24 (+33.33%)
Mutual labels:  polymer, polymer2
vaadin-text-field
The themable Web Component providing input controls. Part of the Vaadin components.
Stars: ✭ 29 (+61.11%)
Mutual labels:  web-component, polymer
Vaadin Charts
Vaadin Charts is a feature-rich interactive graph library that answers the data visualization needs of modern web applications
Stars: ✭ 47 (+161.11%)
Mutual labels:  web-component, polymer
View All Similar Projects ➔

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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].