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>