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>
        <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;
    <body ng-app="example">
            <split-pane-component width="20em">
                This is the left component
            <split-pane-divider width="5px"></split-pane-divider>
                This is the right component
        angular.module('example', ['shagstrom.angular-split-pane']);

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>