Package Exports

vue-grid-layout

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-grid-layout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-grid-layout

vue-grid-layout is a grid layout system, like Gridster, for Vue.js.

Heavily inspired in React-Grid-Layout

[Demo | Changelog]

Projects using vue-grid-layout

Draxed

Know of others? Create a PR to let me know!

Features

Draggable widgets
Resizable widgets
Bounds checking for dragging and resizing
Widgets may be added or removed without rebuilding grid
Layout can be serialized and restored

Installation

Install the vue-grid-layout package package using npm:

npm install vue-grid-layout

Usage

npm install vue-grid-layout

    var testLayout = [
        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
        {"x":2,"y":0,"w":2,"h":4,"i":"1"},
        {"x":4,"y":0,"w":2,"h":5,"i":"2"},
        {"x":6,"y":0,"w":2,"h":3,"i":"3"},
        {"x":8,"y":0,"w":2,"h":3,"i":"4"},
        {"x":10,"y":0,"w":2,"h":3,"i":"5"},
        {"x":0,"y":5,"w":2,"h":5,"i":"6"},
        {"x":2,"y":5,"w":2,"h":5,"i":"7"},
        {"x":4,"y":5,"w":2,"h":5,"i":"8"},
        {"x":6,"y":4,"w":2,"h":4,"i":"9"},
        {"x":8,"y":4,"w":2,"h":4,"i":"10"},
        {"x":10,"y":4,"w":2,"h":4,"i":"11"},
        {"x":0,"y":10,"w":2,"h":5,"i":"12"},
        {"x":2,"y":10,"w":2,"h":5,"i":"13"},
        {"x":4,"y":8,"w":2,"h":4,"i":"14"},
        {"x":6,"y":8,"w":2,"h":4,"i":"15"},
        {"x":8,"y":10,"w":2,"h":5,"i":"16"},
        {"x":10,"y":4,"w":2,"h":2,"i":"17"},
        {"x":0,"y":9,"w":2,"h":3,"i":"18"},
        {"x":2,"y":6,"w":2,"h":2,"i":"19"}
    ];
    
    var GridLayout = VueGridLayout.GridLayout;
    var GridItem = VueGridLayout.GridItem;
    
    new Vue({
        el: '#app',
        components: {
            GridLayout,
            GridItem,
        },
        data: {
            layout: testLayout,
        },
    });

    <grid-layout
            :layout.sync="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
    >

        <grid-item v-for="item in layout"
                   :x.sync="item.x"
                   :y.sync="item.y"
                   :w.sync="item.w"
                   :h.sync="item.h"
                   :i="item.i">
            {{item.i}}
        </grid-item>
    </grid-layout>

Contribute

If you have a feature request, please add it as an issue or make a pull request.

TODO List

Basic grid layout
Responsive
Draggable grid items
Resizable grid items
Static elements
Min/max w/h per item