aurelia-split-pane

![npm][npm] 

A custom element for resizable split panes.

A running demonstration can be found [here][demo].

Browser Support

Tested to work on the following browser versions:

|
IE / Edge |
Firefox |
Chrome |
Opera |
|:----:|:---:|:---:|:---:|
| Edge | 29+ | 32+ | 20+ |

Installation

Install the package via [npm][npm]:

``bash
npm install --save aurelia-split-pane
`

Install the plugin in your [Aurelia][aurelia] project:

`typescript
export function configure(aurelia: Aurelia): void {
aurelia.use.plugin(PLATFORM.moduleName('aurelia-split-pane'));
}
`

Import the [Sass][sass] stylesheet:

`sass
@import '~aurelia-split-pane/style';
`

Usage

The demo contains [two simple usage examples][examples].

Below are a couple of simple examples:

`html



`html



Viewport configurations are an effective way of decoupling sections of your application, and can be used in conjunction
with aurelia-split-pane, where each pane is effectively a viewport. An example of a message inbox, where the list of
contacts and list of messages are both distinct viewports, is available [here][inbox]. The inbox [view][inbox-view]
demonstrates how to use the element as a pane within a element. Aurelia team member
Matthew James Davis has an article providing an in-depth look into viewports, found [here][master-detail].

Contributing

Bug reports and pull requests are welcome on [GitHub][github].

License

This project is available under the terms of the ISC license. See the
LICENSE` file for the copyright information and licensing terms.

[demo]: https://michaelbull.github.io/aurelia-split-pane/
[npm]: https://www.npmjs.com/package/aurelia-split-pane
[aurelia]: http://aurelia.io/
[sass]: http://sass-lang.com/
[examples]: https://github.com/michaelbull/aurelia-split-pane/blob/master/example/pages/example/index.html#L28
[github]: https://github.com/michaelbull/aurelia-split-pane
[inbox]: https://michaelbull.github.io/aurelia-split-pane/#/inbox
[inbox-view]: https://github.com/michaelbull/aurelia-split-pane/blob/master/example/pages/inbox/index.html#L7
[master-detail]: http://davismj.me/blog/master-detail/