{"id":18497616,"url":"https://github.com/scahitdemir/ng-split","last_synced_at":"2025-07-15T12:44:24.217Z","repository":{"id":58241503,"uuid":"75402743","full_name":"scahitdemir/ng-split","owner":"scahitdemir","description":"Angular.js wrapper for Split.js https://scahitdemir.github.io/ng-split/","archived":false,"fork":false,"pushed_at":"2017-10-27T10:29:03.000Z","size":610,"stargazers_count":7,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-19T12:54:21.825Z","etag":null,"topics":["angular-directives","angularjs","ng-split","split","splitjs","wrapper"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scahitdemir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-02T14:31:39.000Z","updated_at":"2018-10-22T07:54:19.000Z","dependencies_parsed_at":"2022-08-31T00:40:49.307Z","dependency_job_id":null,"html_url":"https://github.com/scahitdemir/ng-split","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/scahitdemir/ng-split","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scahitdemir%2Fng-split","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scahitdemir%2Fng-split/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scahitdemir%2Fng-split/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scahitdemir%2Fng-split/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scahitdemir","download_url":"https://codeload.github.com/scahitdemir/ng-split/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scahitdemir%2Fng-split/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265437229,"owners_count":23765119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-directives","angularjs","ng-split","split","splitjs","wrapper"],"created_at":"2024-11-06T13:35:07.128Z","updated_at":"2025-07-15T12:44:24.186Z","avatar_url":"https://github.com/scahitdemir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ng-Split\n\nThis 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//)\n\n## Download Ng-Split\n\nYou can install ng-split via npm and Bower and its dependencies will be downloaded\nautomatically:\n\n#### Npm\n```bash\n$ npm install ng-split --save\n```\n\n#### Bower\n```bash\n$ bower install ng-split --save\n```\n\n## Inject the Ng-Split Directive\n- Add ng-split.min.js to your main file (index.html).\n\n- Set `ng-split` as a dependency in your module\n```javascript\nvar myapp = angular.module('myapp', ['ng-split'])\n```\n\n##HTML\n####Horizontal Split\n```javascript\n\u003csplit direction=\"horizontal\" ng-transclude\u003e\n    \u003csplit-area size=\"50\" ng-transclue\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet...\u003c/p\u003e\n    \u003c/split-area\u003e\n    \u003csplit-area size=\"50\" ng-transclude\u003e\n        \u003cp\u003eSed ut perspiciatis unde omnis iste natus erro...\u003c/p\u003e\n    \u003c/split-area\u003e\n\u003c/split\u003e\n```\n\n####Vertical Split\n```javascript\n\u003csplit direction=\"vertical\" ng-transclude\u003e\n    \u003csplit-area size=\"25\" ng-transclude\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet...\u003c/p\u003e\n    \u003c/split-area\u003e\n    \u003csplit-area size=\"75\" ng-transclude\u003e\n        \u003cp\u003eSed ut perspiciatis unde omnis iste natus erro...\u003c/p\u003e\n    \u003c/split-area\u003e\n\u003c/split\u003e\n```\n\n####Multiple Split\n```javascript\n\u003csplit direction=\"horizontal\" ng-transclude\u003e\n    \u003csplit-area size=\"40\" ng-transclude\u003e\n        \u003csplit direction=\"vertical\" ng-transclude\u003e\n            \u003csplit-area size=\"30\" ng-transclude\u003e\n                \u003cp\u003eLorem ipsum dolor sit amet...\u003c/p\u003e\n            \u003c/split-area\u003e\n            \u003csplit-area size=\"40\" ng-transclude\u003e\n                \u003cp\u003eSed ut perspiciatis unde omnis iste natus erro...\u003c/p\u003e\n            \u003c/split-area\u003e\n            \u003csplit-area size=\"30\" ng-transclude\u003e\n                \u003cp\u003eLorem ipsum dolor sit amet...\u003c/p\u003e\n            \u003c/split-area\u003e\n        \u003c/split\u003e\n    \u003c/split-area\u003e\n    \u003csplit-area size=\"60\" ng-transclude\u003e\n        \u003csplit direction=\"vertical\" ng-transclude\u003e\n            \u003csplit-area size=\"50\" ng-transclude\u003e\n                \u003cp\u003eLorem ipsum dolor sit amet...\u003c/p\u003e\n            \u003c/split-area\u003e\n            \u003csplit-area size=\"50\" ng-transclude\u003e\n                \u003cp\u003eSed ut perspiciatis unde omnis iste natus erro...\u003c/p\u003e\n            \u003c/split-area\u003e\n        \u003c/split\u003e\n    \u003c/split-area\u003e\n\u003c/split\u003e\n```\n\n##CSS\n```css\n  .split p {\n    padding: 20px;\n  }\n\n  .split {\n    -webkit-box-sizing: border-box;\n       -moz-box-sizing: border-box;\n            box-sizing: border-box;\n\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  .gutter {\n    background-color: #eee;\n\n    background-repeat: no-repeat;\n    background-position: 50%;\n  }\n\n  .gutter.gutter-horizontal {\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');\n    cursor: ew-resize;\n  }\n\n  .gutter.gutter-vertical {\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC');\n    cursor: ns-resize;\n  }\n\n  .split.split-horizontal, .gutter.gutter-horizontal {\n    height: 100%;\n    float: left;\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscahitdemir%2Fng-split","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscahitdemir%2Fng-split","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscahitdemir%2Fng-split/lists"}