AnglarJS Split Pane directive

I have created a AngularJS Split Pane directive. It’s built on top of the popular jQuery Split Pane plugin.

Try resizing the browser and dragging the dividers.

It’s a bit simpler to set up than the jQuery plugin, so I hope you all enjoy it!

Simply install with bower:

bower install angular-split-pane

The easiest way to get started is to study the examples folder at github.

Here are some examples:

Here is a complete example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Basic Example</title>
        <link rel="stylesheet" href="bower_components/split-pane/split-pane.css" />
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/split-pane/split-pane.js"></script>
        <script src="bower_components/angular-split-pane/angular-split-pane.js"></script>
        <style type="text/css">
            html, body {
                /* The split-pane needs a container with width and height. */
                height: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
            }
            /* The styling below is very simple. You can style things your own way. */
            body {
                box-sizing: border-box;
                background: #aaa;
                padding: 5px;
            }
            .split-pane-divider {
                background: #aaa;
            }
            .split-pane-component {
                background: #fff;
            }
        </style>
    </head>
    <body ng-app="example">
        <split-pane>
            <split-pane-component width="20em">
                This is the left component
            </split-pane-component>
            <split-pane-divider width="5px"></split-pane-divider>
            <split-pane-component>
                This is the right component
            </split-pane-component>
        </split-pane>
    </body>
    <script>
        angular.module('example', ['shagstrom.angular-split-pane']);
    </script>
</html>