49 lines
1.1 KiB
Markdown
49 lines
1.1 KiB
Markdown
# Styling
|
|
|
|
Grid styling can be customized to fit your needs. Below is a list of the classes you can override.
|
|
|
|
## Placeholder
|
|
|
|
The default css for the placeholder is:
|
|
|
|
````css
|
|
.vue-grid-item.vue-grid-placeholder {
|
|
background: red;
|
|
opacity: 0.2;
|
|
transition-duration: 100ms;
|
|
z-index: 2;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
````
|
|
|
|
You can override the properties using the !important rule:
|
|
|
|
````css
|
|
.vue-grid-item.vue-grid-placeholder {
|
|
background: green !important;
|
|
}
|
|
````
|
|
|
|
Or by wrapping your grid with a more [specific](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) class:
|
|
|
|
````css
|
|
.container .vue-grid-item.vue-grid-placeholder {
|
|
background: green;
|
|
}
|
|
````
|
|
|
|
In this example we change the placeholder background color to green:
|
|
|
|
[View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/ExampleStylingPlaceholder.vue)
|
|
|
|
<ClientOnly>
|
|
<ExampleStylingPlaceholder></ExampleStylingPlaceholder>
|
|
</ClientOnly>
|
|
|
|
|
|
Work in progress...
|