https://github.com/scahitdemir/ng-split
Angular.js wrapper for Split.js https://scahitdemir.github.io/ng-split/
https://github.com/scahitdemir/ng-split
angular-directives angularjs ng-split split splitjs wrapper
Last synced: 8 months ago
JSON representation
Angular.js wrapper for Split.js https://scahitdemir.github.io/ng-split/
- Host: GitHub
- URL: https://github.com/scahitdemir/ng-split
- Owner: scahitdemir
- Created: 2016-12-02T14:31:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-27T10:29:03.000Z (over 8 years ago)
- Last Synced: 2025-06-19T12:54:21.825Z (9 months ago)
- Topics: angular-directives, angularjs, ng-split, split, splitjs, wrapper
- Language: JavaScript
- Homepage:
- Size: 596 KB
- Stars: 7
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ng-Split
This angular directive is wrapper for [Split.js](http://nathancahill.github.io/Split.js/) and also this directive was inspired by [ng2-split](https://bertrandg.github.io/ng2-split//)
## Download Ng-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
```
## Inject the Ng-Split Directive
- Add ng-split.min.js to your main file (index.html).
- Set `ng-split` as a dependency in your module
```javascript
var myapp = angular.module('myapp', ['ng-split'])
```
##HTML
####Horizontal Split
```javascript
Lorem ipsum dolor sit amet...
Sed ut perspiciatis unde omnis iste natus erro...
```
####Vertical Split
```javascript
Lorem ipsum dolor sit amet...
Sed ut perspiciatis unde omnis iste natus erro...
```
####Multiple Split
```javascript
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...
```
##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;
}
```