{"id":21237522,"url":"https://github.com/michaelbull/aurelia-split-pane","last_synced_at":"2025-07-10T18:32:11.861Z","repository":{"id":57186940,"uuid":"121971978","full_name":"michaelbull/aurelia-split-pane","owner":"michaelbull","description":"A custom element for resizable split panes.","archived":true,"fork":false,"pushed_at":"2024-05-24T06:33:39.000Z","size":450,"stargazers_count":12,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-15T17:17:12.622Z","etag":null,"topics":["aurelia","container","custom","element","pane","panel","resizable","split"],"latest_commit_sha":null,"homepage":"https://michaelbull.github.io/aurelia-split-pane/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michaelbull.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-18T17:09:51.000Z","updated_at":"2024-12-25T00:51:07.000Z","dependencies_parsed_at":"2024-06-21T16:54:53.455Z","dependency_job_id":"4944c553-ffd5-449f-a84a-4c7a434c3524","html_url":"https://github.com/michaelbull/aurelia-split-pane","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/michaelbull/aurelia-split-pane","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Faurelia-split-pane","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Faurelia-split-pane/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Faurelia-split-pane/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Faurelia-split-pane/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaelbull","download_url":"https://codeload.github.com/michaelbull/aurelia-split-pane/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Faurelia-split-pane/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264631213,"owners_count":23640941,"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":["aurelia","container","custom","element","pane","panel","resizable","split"],"created_at":"2024-11-21T00:19:13.423Z","updated_at":"2025-07-10T18:32:11.538Z","avatar_url":"https://github.com/michaelbull.png","language":"TypeScript","funding_links":[],"categories":["Table of Contents"],"sub_categories":["Aurelia"],"readme":"# aurelia-split-pane\n\n[![npm](https://img.shields.io/npm/v/aurelia-split-pane.svg)][npm] [![License](https://img.shields.io/github/license/michaelbull/aurelia-split-pane.svg)](LICENSE)\n\nA custom element for resizable split panes.\n\nA running demonstration can be found [here][demo].\n\n## Browser Support\n\nTested to work on the following browser versions:\n\n| \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/45.3.0/edge/edge.svg\" alt=\"IE / Edge\" width=\"16px\" height=\"16px\" /\u003e\u003cbr /\u003eIE / Edge | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/45.3.0/firefox/firefox.svg\" alt=\"Firefox\" width=\"16px\" height=\"16px\" /\u003e\u003cbr /\u003eFirefox | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/45.3.0/chrome/chrome.svg\" alt=\"Chrome\" width=\"16px\" height=\"16px\" /\u003e\u003cbr /\u003eChrome | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/45.3.0/opera/opera.svg\" alt=\"Opera\" width=\"16px\" height=\"16px\" /\u003e\u003cbr /\u003eOpera |\n|:----:|:---:|:---:|:---:|\n| Edge | 29+ | 32+ | 20+ |\n\n## Installation\n\nInstall the package via [npm][npm]:\n\n```bash\nnpm install --save aurelia-split-pane\n```\n\nInstall the plugin in your [Aurelia][aurelia] project:\n\n```typescript\nexport function configure(aurelia: Aurelia): void {\n    aurelia.use.plugin(PLATFORM.moduleName('aurelia-split-pane'));\n}\n```\n\nFor jspm (v16 tested), add the following to your systemjs config.js file\n\n```json\n\"aurelia-split-pane\": {\n    \"map\": {\n      \"./split-pane\": \"./dist/split-pane\",\n      \"./split-pane-divider\": \"./dist/split-pane-divider\"\n    }\n  }\n```\n\nImport the [Sass][sass] stylesheet:\n\n```sass\n@import '~aurelia-split-pane/style';\n```\n\nFor aurelia components that make use of this component, you can import the css stylesheet in your HTML component template like so:\n\n```html\n\u003crequire from=\"aurelia-split-pane/dist/split-pane.css\"\u003e\u003c/require\u003e\n```\n\n## Usage\n\nThe demo contains [two simple usage examples][examples].\n\nBelow are a couple of simple examples:\n\n```html\n\u003csplit-pane direction=\"horizontal\"\u003e\n  \u003cdiv\u003eLeft\u003c/div\u003e\n  \u003cdiv\u003eRight\u003c/div\u003e\n\u003c/split-pane\u003e\n```\n\n```html\n\u003csplit-pane direction=\"vertical\" style=\"height: 500px; text-align: center;\"\u003e\n  \u003cdiv\u003eNorth\u003c/div\u003e\n  \u003csplit-pane direction=\"horizontal\"\u003e\n    \u003cdiv\u003eWest\u003c/div\u003e\n    \u003cdiv\u003eCenter\u003c/div\u003e\n    \u003cdiv\u003eEast\u003c/div\u003e\n  \u003c/split-pane\u003e\n  \u003cdiv\u003eSouth\u003c/div\u003e\n\u003c/split-pane\u003e\n```\n\n#### Usage with Viewports\n\nViewport configurations are an effective way of decoupling sections of your application, and can be used in conjunction\nwith `aurelia-split-pane`, where each pane is effectively a viewport. An example of a message inbox, where the list of\ncontacts and list of messages are both distinct viewports, is available [here][inbox]. The inbox [view][inbox-view]\ndemonstrates how to use the `\u003crouter-view\u003e` element as a pane within a `\u003csplit-pane\u003e` element. Aurelia team member\nMatthew James Davis has an article providing an in-depth look into viewports, found [here][master-detail].\n\n## Contributing\n\nBug reports and pull requests are welcome on [GitHub][github].\n\n## License\n\nThis project is available under the terms of the ISC license. See the\n[`LICENSE`](LICENSE) file for the copyright information and licensing terms.\n\n[demo]: https://michaelbull.github.io/aurelia-split-pane/\n[npm]: https://www.npmjs.com/package/aurelia-split-pane\n[aurelia]: http://aurelia.io/\n[sass]: http://sass-lang.com/\n[examples]: https://github.com/michaelbull/aurelia-split-pane/blob/master/example/pages/example/index.html#L28\n[github]: https://github.com/michaelbull/aurelia-split-pane\n[inbox]: https://michaelbull.github.io/aurelia-split-pane/#/inbox\n[inbox-view]: https://github.com/michaelbull/aurelia-split-pane/blob/master/example/pages/inbox/index.html#L7\n[master-detail]: http://davismj.me/blog/master-detail/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelbull%2Faurelia-split-pane","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelbull%2Faurelia-split-pane","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelbull%2Faurelia-split-pane/lists"}