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>