vue-grid-layout

  

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout

Current version: 2.3.4 (Supports Vue 2.2+)

For Vue 2.1.10 and below use version 2.1.3

For Vue 1 use version 1.0.3

[Demo | Changelog]

Projects using vue-grid-layout

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

Features

  • Draggable widgets
  • Resizable widgets
  • Static widgets
  • Bounds checking for dragging and resizing
  • Widgets may be added or removed without rebuilding grid
  • Layout can be serialized and restored
  • Automatic RTL support (resizing not working with RTL on 2.2.0)
  • Responsive

Getting Started

Installation

npm

# install with npm
npm install vue-grid-layout --save # install with yarn
yarn add vue-grid-layout

Import the library

    import VueGridLayout from 'vue-grid-layout';

Add to other Vue components

   export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
// ... data, methods, mounted (), etc.
}

browser

Include the browser-ready bundle (download from releases) in your page. The components will be automatically available.

    <script src="vue-grid-layout.umd.min.js"></script>

Usage

	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":3,"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"}
]; new Vue({
el: '#app',
data: {
layout: testLayout,
},
});
    <grid-layout
:layout.sync="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:is-mirrored="false"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
> <grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
{{item.i}}
</grid-item>
</grid-layout>

Documentation

Properties

GridLayout
  • layout

    • type: Array
    • required: true

    This is the initial layout of the grid.

    The value must be an Array of Object items. Each item must have ixyw and h properties. Please refer to GridItem documentation below for more informations.

  • colNum

    • type: Number
    • required: false
    • default: 12

    Says how many columns the grid has.

    The value should be a natural number.

  • rowHeight

    • type: Number
    • required: false
    • default: 150

    Says what is a height of a single row in pixels.

  • maxRows

    • type: Number
    • required: false
    • default: Infinity

    Says what is a maximal number of rows in the grid.

  • margin

    • type: Array
    • required: false
    • default: [10, 10]

    Says what are the margins of elements inside the grid.

    The value must be a two-element Array of Number. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.

  • isDraggable

    • type: Boolean
    • required: false
    • default: true

    Says if the grids items are draggable.

  • isResizable

    • type: Boolean
    • required: false
    • default: true

    Says if the grids items are resizable.

  • isMirrored

    • type: Boolean
    • required: false
    • default: false

    Says if the RTL/LTR should be reversed.

  • autoSize

    • type: Boolean
    • required: false
    • default: true

    Says if the container height should swells and contracts to fit contents.

  • verticalCompact

    • type: Boolean
    • required: false
    • default: true

    Says if the layout should be compact vertically.

  • useCssTransforms

    • type: Boolean
    • required: false
    • default: true

    Says if the CSS transition-property: transform; should be used.

  • responsive

    • type: Boolean
    • required: false
    • default: false

    Says if the layout should be responsive to window width

  • breakpoints

    • type: Object
    • required: false
    • default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }

    Breakpoints defined for responsive layout. Sets widths on wich column number changes

  • cols

    • type: Object
    • required: false
    • default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }

    Defines number of columns for each breakpoint

GridItem
  • i

    • type: String
    • required: true

    This is the unique identifier of the item.

  • x

    • type: Number
    • required: true

    Says what is a initial horizontal position of the item (in which column it should be placed).

    The value must be a whole number.

  • y

    • type: Number
    • required: true

    Says what is a initial vertical position of the item (in which row it should be placed).

    The value must be a whole number.

  • w

    • type: Number
    • required: true

    Says what is a initial width of the item.

    The value is a number that is multiplied by colWidth.

  • h

    • type: Number
    • required: true

    Says what is a initial height of the item.

    The value is a number that is multiplied by rowHeight.

  • minW

    • type: Number
    • required: false
    • default: 1

    Says what is a minimal width of the item. If w will be smaller then minW then w will be set to minW.

    The value is a number that is multiplied by colWidth.

  • minH

    • type: Number
    • required: false
    • default: 1

    Says what is a minimal hieght of the item. If h will be smaller then minH then h will be set to minH.

    The value is a number that is multiplied by rowHeight.

  • maxW

    • type: Number
    • required: false
    • default: Infinity

    Says what is a maximal width of the item. If w will be bigger then maxW then w will be set to maxW.

    The value is a number that is multiplied by colWidth.

  • maxH

    • type: Number
    • required: false
    • default: Infinity

    Says what is a maximal height of the item. If h will be bigger then maxH then h will be set to maxH.

    The value is a number that is multiplied by rowHeight

  • isDraggable

    • type: Boolean
    • required: false
    • default: null

    Says if item is draggable.

    If default value is null then it's inherited from parent.

  • isResizable

    • type: Boolean
    • required: false
    • default: null

    Says if item is resizable.

    If default value is null then it's inherited from parent.

  • static

    • type: Boolean
    • required: false
    • default: false

    Says if item is static (won't be draggable, resizable or moved by other items).

  • dragIgnoreFrom

    • type: String
    • required: false
    • default: 'a, button'

    Says which elements of the item shouldn't trigger drag event of the item.

    The value is css-like selector string.

    For more info please refer to ignoreFrom in interact.js docs.

  • dragAllowFrom

    • type: String
    • required: false
    • default: null

    Says which elements of the item should trigger drag event of the item.

    The value is css-like selector string.

    If null then one can drag by any (excluding dragIgnoreFrom) element of the item.

    For more info please refer to allowFrom in interact.js docs.

  • resizeIgnoreFrom

    • type: String
    • required: false
    • default: 'a, button'

    Says which elements of the item shouldn't trigger resize event of the item.

    The value is css-like selector string.

    For more info please refer to ignoreFrom in interact.js docs.

Events

Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized. Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing.

Working example here

    <grid-layout
:layout="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
@layout-created="layoutCreatedEvent"
@layout-before-mount="layoutBeforeMountEvent"
@layout-mounted="layoutMountedEvent"
@layout-ready="layoutReadyEvent"
@layout-updated="layoutUpdatedEvent"
> <grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
@resize="resizeEvent"
@move="moveEvent"
@resized="resizedEvent"
@moved="movedEvent">
{{item.i}}
</grid-item>
</grid-layout>
  • layoutCreatedEvent

    Layout created event

    Emited on the component created lifecycle hook

    layoutCreatedEvent: function(newLayout){
console.log("Created layout: ", newLayout)
}
  • layoutBeforeMountEvent

    Layout beforeMount event

    Emited on the component beforeMount lifecycle hook

    layoutBeforeMountEvent: function(newLayout){
console.log("beforeMount layout: ", newLayout)
}
  • layoutMountedEvent

    Layout mounted event

    Emited on the component mounted lifecycle hook

    layoutMountedEvent: function(newLayout){
console.log("Mounted layout: ", newLayout)
}
  • layoutReadyEvent

    Layout ready event

    Emited when all the operations on the mount hook finish

    layoutReadyEvent: function(newLayout){
console.log("Ready layout: ", newLayout)
}
  • layoutUpdatedEvent

    Layout updated event

    Every time the layout has finished updating and positions of all grid-items are recalculated

    layoutUpdatedEvent: function(newLayout){
console.log("Updated layout: ", newLayout)
}
  • moveEvent

    Move event

    Every time an item is being moved and changes position

    moveEvent: function(i, newX, newY){
console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
},
  • resizeEvent

    Resize event

    Every time an item is being resized and changes size

    resizeEvent: function(i, newH, newW, newHPx, newWPx){
console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
},
  • movedEvent

    Moved event

    Every time an item is finished being moved and changes position

    movedEvent: function(i, newX, newY){
console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
},
  • resizedEvent

    Resized event

    Every time an item is finished being resized and changes size

    /**
*
* @param i the item id/index
* @param newH new height in grid rows
* @param newW new width in grid columns
* @param newHPx new height in pixels
* @param newWPx new width in pixels
*
*/
resizedEvent: function(i, newH, newW, newHPx, newWPx){
console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
},

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

vue-grid-layout的更多相关文章

  1. CSS3 GRID LAYOUT

    CSS3 GRID LAYOUT http://www.w3cplus.com/blog/tags/356.html 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org/

  2. iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6

    In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...

  3. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

  4. WPF笔记(2.4 Grid)——Layout

    原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...

  5. flexbox与grid layout的区别

    flexbox是一种针对一维的局部布局,以轴为核心的弹性布局. grid layout是二维的更加全面的网格布局,

  6. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  7. [Grid Layout] Use the repeat function to efficiently write grid-template values

    We can use the repeat() function if we have repeating specifications for columns and rows. With the  ...

  8. [Grid Layout] Describe a grid layout using named grid lines

    We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-tem ...

  9. [Grid Layout] Specify a grid gutter size with grid-gap

    It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.

  10. [CSS] Get up and running with CSS Grid Layout

    We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...

随机推荐

  1. C# 简单的统计指定几个字符组合的所有结果

    比如 用 a,b,c,d 4个字符组成一个8个长度的字符串,问一共有多少可能,应该有4的8次方种,用代码简单实现 private string[] AAA() { string[] cs = { &q ...

  2. jQuery实现全选与全部选

    为了便于用户理解,直接粘贴下面的代码即可 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. Linux下可以运行bat文件么?

    bat是批处理文件,在windows和linux上都可以使用. 不过在linux的命令行中不可以直接敲"xxx.bat",系统会去找所有的命令. 想要调用bat文件,需要写绝对路径 ...

  4. 前端必备,十大热门的 JavaScript 框架和库

    JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不 ...

  5. C# 与 C/C++ 网络传输字符串解决方案

    { 不管你的数据加没加密,只要有中文,请转16进制后再处理,把16进制再转为GB2312的byte再发送, 接收的话同样 c++ 发送时转16进制再发送,c#16进制转字符串后再转GB2312就可以了 ...

  6. CF838C(博弈+FWT子集卷积+多项式ln、exp)

    传送门: http://codeforces.com/problemset/problem/838/C 题解: 如果一个字符串的排列数是偶数,则先手必胜,因为如果下一层有后手必赢态,直接转移过去,不然 ...

  7. bzoj1038题解

    [题意分析] 求一个下凸壳与一段折线的距离. [解题思路] 先把直线按斜率排序,求出下凸壳,然后枚举所有的顶点的x坐标求最短y坐标差,复杂度O(nlog2n). [参考代码] #include < ...

  8. bzoj1022题解

    [题意分析] 最简单的Anti-Nim博弈模型. [解题思路] 引理:SJ定理 对于一个Anti-Nim游戏,只要有以下两条条件之一,先手必胜: 1.游戏的总SG函数为0且任意子游戏的SG函数不超过1 ...

  9. 笨办法学Python记录--习题12-14 主要是pydoc用法,raw_input,argv

    20140413 -- 习题12 - 14 1. pydoc在windows的用法,必须进入到python安装目录,执行Python -m pydoc raw_input; 网上给出了一个好玩的,不过 ...

  10. 牛客多校第六场 D move 枚举/机智题

    题意: 有个家伙装东西,他的策略是贪心,每次装进去这个盒子能装下的最大的东西,直到把这个盒子装满,再去装下一个盒子. 给出盒子的数量k和一些东西的重量,问你最小需要多大的盒子才能以这种贪心策略装下. ...