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 orientation="horizontal" minSize="50">
       <div></div>
       <div></div>
   </SplitPane>

    <SplitPane orientation="horizontal" minSize="50">
        <div></div>
        <SplitPane orientation="vertical">
            <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.vertical {
        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.vertical:hover {
        border-top: 5px solid rgba(0, 0, 0, 0.5);
        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
    }

    .Resizer.horizontal {
        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.horizontal:hover {
        border-left: 5px solid rgba(0, 0, 0, 0.5);
        border-right: 5px solid rgba(0, 0, 0, 0.5);
    }

UMD-style build

A standalone browserify build can be produced by running:

npm run-script dist

This will produce a UMD-compatible module that assumes that your module system can satisfy calls to require('react') and require('react-vendor-prefix').