Curtissimo.SplitPane

A nestable split pane for Elm.

Check out the live example. Source for the examples can be found in the ./examples directory.

Design Goals

So, I needed a nestable split pane for an app I was building with the following features:

• Sets the fewest style attributes possible in the DOM
• Provides CSS classes on child panes to indicate width
• Can handle absolute and relative measures
• Can handle nested split panes
• Can show and hide the secondary panes
• Can properly handle overflow
• Customizable via CSS

Turns out, that's a lot to ask of some split panes. There's a nice version with whale9490/elm-split-pane, but it unfortunately didn't meet the needs of what I wanted for the first, second, and last items.

Usage

The split pane relies on the size of the container that it's put in. So, either set a fixed height/width on the container, or do some Grid Layout stuff (which is what I do).

The following table shows the CSS variables available for customization with their default values.

NPM Package

This package relies on external styles.

Install the package from NPM using the following command.

npm install --save-dev @curtissimo/elm-split-pane

Then, as part of your build process, include the external styles. To include the CSS, use the following import adapted to your build's needs.

@import url(@curtissimo/elm-split-pane/main.css);