Skip to content

Commit 77c2e08

Browse files
gmsagmsa
committed
added first styling example
1 parent b3d30f6 commit 77c2e08

File tree

4 files changed

+190
-0
lines changed

4 files changed

+190
-0
lines changed

‎website/docs/.vuepress/components/ExampleStylingPlaceholder.vue

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<template>
2+
<div class="container">
3+
<grid-layout :layout="layout"
4+
:col-num="12"
5+
:row-height="30"
6+
:is-draggable="draggable"
7+
:is-resizable="resizable"
8+
:vertical-compact="true"
9+
:use-css-transforms="true"
10+
>
11+
<grid-item v-for="item in layout"
12+
:static="item.static"
13+
:x="item.x"
14+
:y="item.y"
15+
:w="item.w"
16+
:h="item.h"
17+
:i="item.i"
18+
>
19+
<span class="text">{{itemTitle(item)}}</span>
20+
</grid-item>
21+
</grid-layout>
22+
</div>
23+
</template>
24+
25+
<script>
26+
import { GridLayout, GridItem } from "vue-grid-layout"
27+
28+
export default {
29+
components: {
30+
GridLayout,
31+
GridItem
32+
},
33+
data() {
34+
return {
35+
layout: [
36+
{"x":0,"y":0,"w":2,"h":2,"i":"0", static: false},
37+
{"x":2,"y":0,"w":2,"h":4,"i":"1", static: true},
38+
{"x":4,"y":0,"w":2,"h":5,"i":"2", static: false},
39+
{"x":6,"y":0,"w":2,"h":3,"i":"3", static: false},
40+
{"x":8,"y":0,"w":2,"h":3,"i":"4", static: false},
41+
{"x":10,"y":0,"w":2,"h":3,"i":"5", static: false},
42+
{"x":0,"y":5,"w":2,"h":5,"i":"6", static: false},
43+
{"x":2,"y":5,"w":2,"h":5,"i":"7", static: false},
44+
{"x":4,"y":5,"w":2,"h":5,"i":"8", static: false},
45+
{"x":6,"y":3,"w":2,"h":4,"i":"9", static: true},
46+
{"x":8,"y":4,"w":2,"h":4,"i":"10", static: false},
47+
{"x":10,"y":4,"w":2,"h":4,"i":"11", static: false},
48+
{"x":0,"y":10,"w":2,"h":5,"i":"12", static: false},
49+
{"x":2,"y":10,"w":2,"h":5,"i":"13", static: false},
50+
{"x":4,"y":8,"w":2,"h":4,"i":"14", static: false},
51+
{"x":6,"y":8,"w":2,"h":4,"i":"15", static: false},
52+
{"x":8,"y":10,"w":2,"h":5,"i":"16", static: false},
53+
{"x":10,"y":4,"w":2,"h":2,"i":"17", static: false},
54+
{"x":0,"y":9,"w":2,"h":3,"i":"18", static: false},
55+
{"x":2,"y":6,"w":2,"h":2,"i":"19", static: false}
56+
],
57+
draggable: true,
58+
resizable: true,
59+
index: 0
60+
}
61+
},
62+
methods: {
63+
itemTitle(item) {
64+
let result = item.i;
65+
if (item.static) {
66+
result += " - Static";
67+
}
68+
return result;
69+
}
70+
}
71+
}
72+
</script>
73+
74+
<style>
75+
.container .vue-grid-item.vue-grid-placeholder {
76+
background: green;
77+
}
78+
79+
.vue-grid-layout {
80+
background: #eee;
81+
}
82+
83+
.vue-grid-item:not(.vue-grid-placeholder) {
84+
background: #ccc;
85+
border: 1px solid black;
86+
}
87+
88+
.vue-grid-item .resizing {
89+
opacity: 0.9;
90+
}
91+
92+
.vue-grid-item .static {
93+
background: #cce;
94+
}
95+
96+
.vue-grid-item .text {
97+
font-size: 24px;
98+
text-align: center;
99+
position: absolute;
100+
top: 0;
101+
bottom: 0;
102+
left: 0;
103+
right: 0;
104+
margin: auto;
105+
height: 100%;
106+
width: 100%;
107+
}
108+
109+
.vue-grid-item .no-drag {
110+
height: 100%;
111+
width: 100%;
112+
}
113+
114+
.vue-grid-item .minMax {
115+
font-size: 12px;
116+
}
117+
118+
.vue-grid-item .add {
119+
cursor: pointer;
120+
}
121+
122+
.vue-draggable-handle {
123+
position: absolute;
124+
width: 20px;
125+
height: 20px;
126+
top: 0;
127+
left: 0;
128+
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
129+
background-position: bottom right;
130+
padding: 0 8px 8px 0;
131+
background-repeat: no-repeat;
132+
background-origin: content-box;
133+
box-sizing: border-box;
134+
cursor: pointer;
135+
}
136+
137+
138+
</style>

‎website/docs/.vuepress/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ module.exports = {
2323
'usage',
2424
'properties',
2525
'events',
26+
'styling',
2627
]
2728
},
2829
{

‎website/docs/guide/auto-size.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Auto Sizing Grid Items
2+
3+
TODO: https://github.com/jbaysolutions/vue-grid-layout/issues/351

‎website/docs/guide/styling.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Styling
2+
3+
Grid styling can be customized to fit your needs. Below is a list of the classes you can override.
4+
5+
## Placeholder
6+
7+
The default css for the placeholder is:
8+
9+
````css
10+
.vue-grid-item.vue-grid-placeholder {
11+
background: red;
12+
opacity: 0.2;
13+
transition-duration: 100ms;
14+
z-index: 2;
15+
-webkit-user-select: none;
16+
-moz-user-select: none;
17+
-ms-user-select: none;
18+
-o-user-select: none;
19+
user-select: none;
20+
}
21+
````
22+
23+
You can override the properties using the !important rule:
24+
25+
````css
26+
.vue-grid-item.vue-grid-placeholder {
27+
background: green !important;
28+
}
29+
````
30+
31+
Or by wrapping your grid with a more (specific)[https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity] class:
32+
33+
````css
34+
.container .vue-grid-item.vue-grid-placeholder {
35+
background: green !important;
36+
}
37+
````
38+
39+
In this example we change the placeholder background color to green:
40+
41+
[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/ExampleStylingPlaceholder.vue)
42+
43+
<ClientOnly>
44+
<ExampleStylingPlaceholder></ExampleStylingPlaceholder>
45+
</ClientOnly>
46+
47+
48+
Working in progress...

0 commit comments

Comments
 (0)