https://github.com/michaelbull/aurelia-split-pane
A custom element for resizable split panes.
https://github.com/michaelbull/aurelia-split-pane
aurelia container custom element pane panel resizable split
Last synced: 3 months ago
JSON representation
A custom element for resizable split panes.
- Host: GitHub
- URL: https://github.com/michaelbull/aurelia-split-pane
- Owner: michaelbull
- License: isc
- Archived: true
- Created: 2018-02-18T17:09:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-24T06:33:39.000Z (over 1 year ago)
- Last Synced: 2025-06-15T17:17:12.622Z (4 months ago)
- Topics: aurelia, container, custom, element, pane, panel, resizable, split
- Language: TypeScript
- Homepage: https://michaelbull.github.io/aurelia-split-pane/
- Size: 439 KB
- Stars: 12
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# aurelia-split-pane
[][npm] [](LICENSE)
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'));
}
```
For jspm (v16 tested), add the following to your systemjs config.js file
```json
"aurelia-split-pane": {
"map": {
"./split-pane": "./dist/split-pane",
"./split-pane-divider": "./dist/split-pane-divider"
}
}
```
Import the [Sass][sass] stylesheet:
```sass
@import '~aurelia-split-pane/style';
```
For aurelia components that make use of this component, you can import the css stylesheet in your HTML component template like so:
```html
```
## Usage
The demo contains [two simple usage examples][examples].
Below are a couple of simple examples:
```html
Left
Right
```
```html
North
West
Center
East
South
```
#### Usage with Viewports
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`](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/