Package Exports

react-split-pane
react-split-pane/lib/Pane

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-split-pane) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-split-pane

Split-Pane component built with React, can be split vertically or horizontally.

Check out the demo

   <SplitPane split="vertical" minSize="50">
       <div></div>
       <div></div>
   </SplitPane>

    <SplitPane split="vertical" minSize="50">
        <div></div>
        <SplitPane split="horizontal">
            <div></div>
            <div></div>
        </SplitPane>
    </SplitPane>

Example styling

This gives a single pixel wide divider, but with a 'grabbable' surface of 11 pixels.

Thanks to background-clip: padding-box; for making transparent borders possible.

    .Resizer {
        background: #000;
        opacity: .2;
        z-index: 1;
        -moz-background-clip: padding;
        -webkit-background-clip: padding;
        background-clip: padding-box;
    }

     .Resizer:hover {
        -webkit-transition: all 2s ease;
        transition: all 2s ease;
    }

     .Resizer.horizontal {
        height: 11px;
        margin: -5px 0;
        border-top: 5px solid rgba(255, 255, 255, 0);
        border-bottom: 5px solid rgba(255, 255, 255, 0);
        cursor: row-resize;
        width: 100%;
    }

    .Resizer.horizontal:hover {
        border-top: 5px solid rgba(0, 0, 0, 0.5);
        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
    }

    .Resizer.vertical {
        width: 11px;
        margin: 0 -5px;
        border-left: 5px solid rgba(255, 255, 255, 0);
        border-right: 5px solid rgba(255, 255, 255, 0);
        cursor: col-resize;
        height: 100%;
    }

    .Resizer.vertical:hover {
        border-left: 5px solid rgba(0, 0, 0, 0.5);
        border-right: 5px solid rgba(0, 0, 0, 0.5);
    }