Skip to content

Commit d53818a

Browse files
gmsagmsa
committed
first examples
1 parent a3a1a48 commit d53818a

15 files changed

+23487
-575
lines changed

‎dist/vue-grid-layout.js

Lines changed: 13109 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.min.js

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/app.js

Lines changed: 0 additions & 516 deletions
This file was deleted.

‎examples/01-basic-responsive.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 1 - Basic Responsive</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<link rel="stylesheet" href="app.css">
8+
</head>
9+
<body>
10+
<h1>Vue Grid Layout Example 1 - Basic Responsive</h1>
11+
<div id="app" style="width: 100%;">
12+
<!--<pre>{{ $data | json }}</pre>-->
13+
<div>
14+
<div class="layoutJSON">
15+
Displayed as <code>[x, y, w, h]</code>:
16+
<div class="columns">
17+
<div class="layoutItem" v-for="item in layout">
18+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
<div id="content">
24+
<responsive-grid-layout :layout.sync="layout" :layouts="layouts" :row-height="30" :is-draggable="true" :vertical-compact="true">
25+
<grid-item v-for="item in layout"
26+
:x.sync="item.x"
27+
:y.sync="item.y"
28+
:w.sync="item.w"
29+
:h.sync="item.h"
30+
:id="item.i"
31+
>
32+
<span class="text">{{item.i}}</span>
33+
</grid-item>
34+
</responsive-grid-layout>
35+
</div>
36+
37+
</div>
38+
<script src="vue.js"></script>
39+
<script src="../dist/vue-grid-layout.js"></script>
40+
<script src="01-basic-responsive.js"></script>
41+
</body>
42+
</html>

‎examples/01-basic-responsive.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
var testLayout = [
2+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
3+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
4+
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
5+
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
6+
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
7+
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
8+
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
9+
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
10+
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
11+
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
12+
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
13+
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
14+
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
15+
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
16+
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
17+
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
18+
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
19+
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
20+
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
21+
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
22+
];
23+
24+
//var Vue = require('vue');
25+
26+
Vue.config.debug = true;
27+
Vue.config.devtools = true;
28+
29+
var ResponsiveGridLayout = VueGridLayout.ResponsiveGridLayout;
30+
var GridItem = VueGridLayout.GridItem;
31+
32+
new Vue({
33+
el: '#app',
34+
components: {
35+
ResponsiveGridLayout,
36+
GridItem,
37+
},
38+
data: {
39+
layout: testLayout,
40+
layouts: {lg: testLayout}
41+
},
42+
});
43+
44+
45+
function generateLayout() {
46+
return _.map(_.range(0, 25), function (item, i) {
47+
var y = Math.ceil(Math.random() * 4) + 1;
48+
return {
49+
x: _.random(0, 5) * 2 % 12,
50+
y: Math.floor(i / 6) * y,
51+
w: 2,
52+
h: y,
53+
i: i.toString(),
54+
static: Math.random() < 0.05
55+
};
56+
});
57+
}
58+
59+
60+

‎examples/02-basic.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 1 - Basic Responsive</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<link rel="stylesheet" href="app.css">
8+
</head>
9+
<body>
10+
<h1>Vue Grid Layout Example 1 - Basic Responsive</h1>
11+
<div id="app" style="width: 100%;">
12+
<!--<pre>{{ $data | json }}</pre>-->
13+
<div>
14+
<div class="layoutJSON">
15+
Displayed as <code>[x, y, w, h]</code>:
16+
<div class="columns">
17+
<div class="layoutItem" v-for="item in layout">
18+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
<div id="content">
24+
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
25+
<grid-item v-for="item in layout"
26+
:x.sync="item.x"
27+
:y.sync="item.y"
28+
:w.sync="item.w"
29+
:h.sync="item.h"
30+
:id="item.i"
31+
>
32+
<span class="text">{{item.i}}</span>
33+
</grid-item>
34+
</grid-layout>
35+
</div>
36+
37+
</div>
38+
<script src="vue.js"></script>
39+
<script src="../dist/vue-grid-layout.js"></script>
40+
<script src="02-basic.js"></script>
41+
</body>
42+
</html>

‎examples/02-basic.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
var testLayout = [
2+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
3+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
4+
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
5+
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
6+
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
7+
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
8+
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
9+
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
10+
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
11+
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
12+
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
13+
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
14+
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
15+
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
16+
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
17+
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
18+
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
19+
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
20+
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
21+
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
22+
];
23+
24+
//var Vue = require('vue');
25+
26+
Vue.config.debug = true;
27+
Vue.config.devtools = true;
28+
29+
var GridLayout = VueGridLayout.GridLayout;
30+
var GridItem = VueGridLayout.GridItem;
31+
32+
new Vue({
33+
el: '#app',
34+
components: {
35+
GridLayout,
36+
GridItem,
37+
},
38+
data: {
39+
layout: testLayout,
40+
layouts: {lg: testLayout}
41+
},
42+
});
43+
44+
45+
function generateLayout() {
46+
return _.map(_.range(0, 25), function (item, i) {
47+
var y = Math.ceil(Math.random() * 4) + 1;
48+
return {
49+
x: _.random(0, 5) * 2 % 12,
50+
y: Math.floor(i / 6) * y,
51+
w: 2,
52+
h: y,
53+
i: i.toString(),
54+
static: Math.random() < 0.05
55+
};
56+
});
57+
}
58+
59+
60+

‎example/app.css renamed to ‎examples/app.css

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
.vue-grid-layout {
77
background: #eee;
88
}
9+
910
.layoutJSON {
1011
background: #ddd;
1112
border: 1px solid black;
@@ -17,33 +18,6 @@
1718
-webkit-columns: 120px;
1819
columns: 120px;
1920
}
20-
.vue-grid-item:not(.vue-grid-placeholder) {
21-
background: #ccc;
22-
border: 1px solid black;
23-
}
24-
.vue-grid-item.resizing {
25-
opacity: 0.9;
26-
}
27-
.vue-grid-item.static {
28-
background: #cce;
29-
}
30-
.vue-grid-item .text {
31-
font-size: 24px;
32-
text-align: center;
33-
position: absolute;
34-
top: 0;
35-
bottom: 0;
36-
left: 0;
37-
right: 0;
38-
margin: auto;
39-
height: 24px;
40-
}
41-
.vue-grid-item .minMax {
42-
font-size: 12px;
43-
}
44-
.vue-grid-item .add {
45-
cursor: pointer;
46-
}
4721

4822

4923

0 commit comments

Comments
 (0)