aurelia-gridstack

Aurelia wrapper for gridstack

Installation

npm i gridstack aurelia-gridstack aurelia-typed-observable-plugin tslib --save

Configuration

1// main.ts
2export function configure(aurelia: Aurelia) {
3    aurelia.use.plugin(PLATFORM.moduleName("aurelia-gridstack"));
4    // the rest of your configuration...
5}

Usage

1  <grid-stack min-row="5" float>
2    <grid-stack-item x="0" y="0" w="2" h="1">
3      <div class="item">Item1</div>
4    </grid-stack-item>
5    <grid-stack-item x="1" y="1" w="2" h="2">
6      <div class="item">Item2</div>
7    </grid-stack-item>
8    <grid-stack-item x="3" y="2" w="1" h="2">
9      <div class="item">Item3</div>
10    </grid-stack-item>
11  </grid-stack>
12
13  Or with bindings
14
15  <grid-stack min-row="5" float>
16    <grid-stack-item repeat.for="i of items" x.bind="i.x" y.bind="i.y" w.bind="i.w" h.bind="i.h">
17      <div class="item">
18        <div>Item ${$index + 1}</div>
19        <div>x: ${i.x}</div>
20        <div>y: ${i.y}</div>
21        <div>w: ${i.w}</div>
22        <div>h: ${i.h}</div>
23      </div>
24    </grid-stack-item>
25  </grid-stack>

1  items = [
2    { x: 0, y: 0, w: 2, h: 1 },
3    { x: 1, y: 1, w: 2, h: 2 },
4    { x: 3, y: 2, w: 1, h: 2 }
5  ];

Static

You can lock a grid by setting static on the grid-stack component:

1  <grid-stack static></grid-stack>

Contribution

If you feel that something is missing please submit an issue or better yet a PR.