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