Simply aurelia custom attribute to split screen using https://github.com/nathancahill/Split.js

demo
https://ne0guille-aurelia-split-panel.azurewebsites.net/

Installation

npm install aurelia-split-panel --save

Plugin Setup
aurelia.use.plugin(PLATFORM.moduleName('aurelia-split-panel'));

add style in webpack
'aurelia-split-panel/dist/aurelia-split-panel.css'

Usage
split-panel custom attribute needs to be placed on the parent of the panels to be splitted.
Panels must specify an Id.

If the parent doesnt’t have a height and the clientHeight is also 0, it will take the childrens panel height;

<div split-panel style="height: 200px">
    <div id="panel1">
      <p>test</p>
      <a>test</a>
      <a>test</a>
    </div>
    <div id="panel2">
      <p>test</p>
      <a>test</a>
      <a>test</a>
    </div>
  </div>

Options
https://nathancahill.github.io/Split.js/

  sizes: Array<number>; Initial sizes of each element in percents.
  minSize: Array<number> | number = 100; Minimum size of each element in pixels.
  gutterSize: number = 10; Gutter size in pixels.
  vertical: boolean = false; Direction to split: horizontal or vertical.
  initialize: boolean = true; The split its initialize by default when the element is attached.

<div split-panel="sizes.bind: sizesArray; min-size.bind: minSizeProp; gutter-size: 5; vertical: true; initialize: false ">
    <div id="panel1">
      <p>test</p>
      <a>test</a>
      <a>test</a>
    </div>
    <div id="panel2">
      <p>test</p>
      <a>test</a>
      <a>test</a>
    </div>
  </div>

SplitService
You can trigger programatically the following methods using the SplitService class.

  create(options: SplitOptions): void;
  setSizes(sizes: number[]): void;
  destroy(): void;

Dependencies
“split.js”: https://nathancahill.github.io/Split.js/