vue-grid-layout
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
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
ofObject
items. Each item must havei
,x
,y
,w
andh
properties. Please refer toGridItem
documentation below for more informations.- type:
colNum
- type:
Number
- required:
false
- default:
12
Says how many columns the grid has.
The value should be a natural number.
- type:
rowHeight
- type:
Number
- required:
false
- default:
150
Says what is a height of a single row in pixels.
- type:
maxRows
- type:
Number
- required:
false
- default:
Infinity
Says what is a maximal number of rows in the grid.
- type:
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
ofNumber
. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.- type:
isDraggable
- type:
Boolean
- required:
false
- default:
true
Says if the grids items are draggable.
- type:
isResizable
- type:
Boolean
- required:
false
- default:
true
Says if the grids items are resizable.
- type:
isMirrored
- type:
Boolean
- required:
false
- default:
false
Says if the RTL/LTR should be reversed.
- type:
autoSize
- type:
Boolean
- required:
false
- default:
true
Says if the container height should swells and contracts to fit contents.
- type:
verticalCompact
- type:
Boolean
- required:
false
- default:
true
Says if the layout should be compact vertically.
- type:
useCssTransforms
- type:
Boolean
- required:
false
- default:
true
Says if the CSS
transition-property: transform;
should be used.- type:
responsive
- type:
Boolean
- required:
false
- default:
false
Says if the layout should be responsive to window width
- type:
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
- type:
cols
- type:
Object
- required:
false
- default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
Defines number of columns for each breakpoint
- type:
GridItem
i
- type:
String
- required:
true
This is the unique identifier of the item.
- type:
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.
- type:
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.
- type:
w
- type:
Number
- required:
true
Says what is a initial width of the item.
The value is a number that is multiplied by
colWidth
.- type:
h
- type:
Number
- required:
true
Says what is a initial height of the item.
The value is a number that is multiplied by
rowHeight
.- type:
minW
- type:
Number
- required:
false
- default:
1
Says what is a minimal width of the item. If
w
will be smaller thenminW
thenw
will be set tominW
.The value is a number that is multiplied by
colWidth
.- type:
minH
- type:
Number
- required:
false
- default:
1
Says what is a minimal hieght of the item. If
h
will be smaller thenminH
thenh
will be set tominH
.The value is a number that is multiplied by
rowHeight
.- type:
maxW
- type:
Number
- required:
false
- default:
Infinity
Says what is a maximal width of the item. If
w
will be bigger thenmaxW
thenw
will be set tomaxW
.The value is a number that is multiplied by
colWidth
.- type:
maxH
- type:
Number
- required:
false
- default:
Infinity
Says what is a maximal height of the item. If
h
will be bigger thenmaxH
thenh
will be set tomaxH
.The value is a number that is multiplied by
rowHeight
- type:
isDraggable
- type:
Boolean
- required:
false
- default:
null
Says if item is draggable.
If default value is
null
then it's inherited from parent.- type:
isResizable
- type:
Boolean
- required:
false
- default:
null
Says if item is resizable.
If default value is
null
then it's inherited from parent.- type:
static
- type:
Boolean
- required:
false
- default:
false
Says if item is static (won't be draggable, resizable or moved by other items).
- type:
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.- type:
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 (excludingdragIgnoreFrom
) element of the item.For more info please refer to
allowFrom
in interact.js docs.- type:
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.- type:
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的更多相关文章
- CSS3 GRID LAYOUT
CSS3 GRID LAYOUT http://www.w3cplus.com/blog/tags/356.html 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org/
- 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 ...
- Unity3D 使用 UI 的 Grid Layout Group 组件。
1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
- WPF笔记(2.4 Grid)——Layout
原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...
- flexbox与grid layout的区别
flexbox是一种针对一维的局部布局,以轴为核心的弹性布局. grid layout是二维的更加全面的网格布局,
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
- [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 ...
- [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 ...
- [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.
- [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 ...
随机推荐
- spark自定义分区器实现
在spark中,框架默认使用的事hashPartitioner分区器进行对rdd分区,但是实际生产中,往往使用spark自带的分区器会产生数据倾斜等原因,这个时候就需要我们自定义分区,按照我们指定的字 ...
- win7在本地windows的hosts文件中,添加新的域名映射后,不生效(问题描述:hosts文件添加自定义域名后,ping 不通域名,但是ping ip可以)
将原来的hosts文件删除,在C:\Windows\System32\drivers\etc目录下,新建一个新的hosts文件(记住文件不要后缀,不要命名为.txt,本人在此踩过坑,或者可以百度搜索下 ...
- 一个简易h5涉及的ps技巧
事实证明,很长时间不做,是会忘掉的呀,的呀,呀,啊~ 1.合并图层 CTRL+E合并多个图层 2.切片 3.导出 文件-------导出------存储为web所用格式-------->> ...
- mysql 存储过程 随笔
CREATE PROCEDURE `g2`( in sts int,in type int, code varchar(20),in s int)begin declare i int; declar ...
- [原创] delphi KeyUp、KeyPress、Keydown区别和用法,如何不按键盘调用事件
KeyPress (Sender: TObject; var Key: Char); 当用户按下键盘上的字符键(字母,数字) 会触发该事件,功能键则不会(F1-F12,Ctrl,Alt,Shift ...
- tomcat部署安全证书文件(阿里云SSL证书)
1.下载安全证书文件: 这里使用的是阿里云SSL证书(免费一年) 2.把下载的压缩包进行解压 3.将pfx文件拷贝至服务器 4.利用jdk将pfx转jks 5.cmd进入命令行 6.切换至jdk的bi ...
- 关于C++里set_intersection(取集合交集)、set_union(取集合并集)、set_difference(取集合差集)等函数的使用总结
文章转载自https://blog.csdn.net/zangker/article/details/22984803 set里面有set_intersection(取集合交集).set_union( ...
- java带jar编译与运行
javac -classpath ./wxpay-sdk-0.0.3.jar HttpsTest2.java java -cp .:./wxpay-sdk-0.0.3.jar HttpsTest2
- UVA 240 Variable Radix Huffman Encoding
题目链接:https://vjudge.net/problem/UVA-240 题目大意 哈夫曼编码是一种最优编码方法.根据已知源字母表中字符出现的频率,将源字母表中字符编码为目标字母表中字符,最优的 ...
- !!!myeclipse 上加载本地图片问题,无法加载问题
出现无法加载本地图片的问题, 原因就是把图片放到了本地项目中的image了,但是myeclipse上没有刷新 这样以后 本地的图片比在线的要快 低级错误,诶!