npm install ng-splitThis angular directive is wrapper for Split.js and also this directive was inspired by ng2-split
You can install ng-split via npm and Bower and its dependencies will be downloaded
automatically:
#### Npm
``bash`
$ npm install ng-split --save
#### Bower
`bash`
$ bower install ng-split --save
- Set ng-split as a dependency in your module`javascript`
var myapp = angular.module('myapp', ['ng-split'])
##HTML Lorem ipsum dolor sit amet... Sed ut perspiciatis unde omnis iste natus erro...
####Horizontal Split
`javascript`
####Vertical Split Lorem ipsum dolor sit amet... Sed ut perspiciatis unde omnis iste natus erro...
`javascript`
####Multiple Split Lorem ipsum dolor sit amet... Sed ut perspiciatis unde omnis iste natus erro... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Sed ut perspiciatis unde omnis iste natus erro...
`javascript`
##CSS
`css
.split p {
padding: 20px;
}
.split {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}
.gutter {
background-color: #eee;
background-repeat: no-repeat;
background-position: 50%;
}
.gutter.gutter-horizontal {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
cursor: ew-resize;
}
.gutter.gutter-vertical {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC');
cursor: ns-resize;
}
.split.split-horizontal, .gutter.gutter-horizontal {
height: 100%;
float: left;
}
``