split_panel

Simple panel library supporting horizontal and vertical splitter panels


License
Other

Documentation

Split Panel

Basic components for providing horizontal or vertical splitters and some liquid layout.

Components

There are two components x-s-p-v-panel for vertical splitters and x-s-p-h-panel for horizontal splitters. Split Panels contain two types of entities: Split Elements and Splitters. Splitters are placed between each Split Element child of the panel component. A small amount of configuration is possible using html attributes. The attributes can be used on the component instantiation as well as contained children.

A simple example:

<x-s-p-v-panel data-s-p-fit-to-method='window' style="background: BurlyWood">
  <x-s-p-h-panel data-s-p-fit-to-method='parent' style="background: BurlyWood">
    <p>V1 Horizontal (First) Panel Nested in Vertical Panel</p>
    <p>V1 Horizontal (Second) Panel Nested in Vertical Panel</p>
    <p>V1 Horizontal (Third) Panel Nested in Vertical Panel</p>
  </x-s-p-h-panel>
  <x-s-p-h-panel data-s-p-fit-to-method='parent' style="background: BurlyWood">
    <p>V2 Horizontal (First) Panel Nested in Vertical Panel</p>
    <p>V2 Horizontal (Second) Panel Nested in Vertical Panel</p>
    <p>V2 Horizontal (Third) Panel Nested in Vertical Panel</p>
  </x-s-p-h-panel>
</x-s-p-v-panel>

The following html attributes are supported by the component:

  • data-s-p-fit-to-method Specified on the panel itself. The allowed values are window, parent and self. Only the outermost panel may have this set to window which indicates the panel will grow/shrink with the window.

  • data-s-p-static Specified on the Split Element (i.e. children of the panel). Specifying this as data-s-p-static="true" will cause the size to be fixed during resizing.

  • data-s-p-proportion Specified on the Split Element (i.e. children of the panel). When a number is specified it represents the percentage of area allocated to all non-static elements that the decorated element should get.

Potential Enhancements

  • Tests.
  • Include support for splitter collapsing.
  • Make it possible/easier for client code to style the splitter/ghost splitter.

Authors

  • Daniel Davidson