6.0.0 • Published 12 days ago
aurelia-gridstack v6.0.0
aurelia-gridstack
Aurelia wrapper for gridstack
Installation
npm i gridstack aurelia-gridstack aurelia-typed-observable-plugin tslib --save
Configuration
// main.ts
export function configure(aurelia: Aurelia) {
aurelia.use.plugin(PLATFORM.moduleName("aurelia-gridstack"));
// the rest of your configuration...
}
Usage
<grid-stack min-row="5" float>
<grid-stack-item x="0" y="0" w="2" h="1">
<div class="item">Item1</div>
</grid-stack-item>
<grid-stack-item x="1" y="1" w="2" h="2">
<div class="item">Item2</div>
</grid-stack-item>
<grid-stack-item x="3" y="2" w="1" h="2">
<div class="item">Item3</div>
</grid-stack-item>
</grid-stack>
Or with bindings
<grid-stack min-row="5" float>
<grid-stack-item repeat.for="i of items" x.bind="i.x" y.bind="i.y" w.bind="i.w" h.bind="i.h">
<div class="item">
<div>Item ${$index + 1}</div>
<div>x: ${i.x}</div>
<div>y: ${i.y}</div>
<div>w: ${i.w}</div>
<div>h: ${i.h}</div>
</div>
</grid-stack-item>
</grid-stack>
items = [
{ x: 0, y: 0, w: 2, h: 1 },
{ x: 1, y: 1, w: 2, h: 2 },
{ x: 3, y: 2, w: 1, h: 2 }
];
Static
You can lock a grid by setting static
on the grid-stack component:
<grid-stack static></grid-stack>
Contribution
If you feel that something is missing please submit an issue or better yet a PR.
6.0.0
12 days ago
5.0.0-au2
10 months ago
5.0.0
10 months ago
4.0.0
1 year ago
4.0.0-au2
1 year ago
4.0.1-au2
1 year ago
3.0.1
2 years ago
3.0.1-au2
2 years ago
3.0.0-au2
2 years ago
3.0.0
2 years ago
2.0.1-au2
2 years ago
2.0.1
2 years ago
2.0.0-au2
2 years ago
2.0.0
2 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.2.0
3 years ago
1.1.0
3 years ago
1.0.0-au2
3 years ago
1.0.0
3 years ago