Skip to content
Snippets Groups Projects
Commit 65c17052 authored by Julian's avatar Julian
Browse files

Provide examples of blocked fields

parent d445fda3
No related branches found
No related tags found
1 merge request!2Resolve "Implement basic functionality"
...@@ -4,8 +4,45 @@ import Grid from "../../src/Grid.vue"; ...@@ -4,8 +4,45 @@ import Grid from "../../src/Grid.vue";
<template> <template>
<div id="app"> <div id="app">
<Grid :rows="10" :cols="5"></Grid> <Grid :rows="10" :cols="5" :pos-validation="blockField">
<div id="blocker">
This field is blocked because it's filled, the next one programmatically
</div>
</Grid>
</div> </div>
</template> </template>
<style scoped></style> <script>
export default {
name: "App",
methods: {
blockField(x, y, key) {
// We won't move fields with ID 'obj8' and nothing into (4, 3)
if (x === 4 && y === 3) return false;
return key !== "obj8";
},
},
};
</script>
<style scoped>
#blocker {
grid-row: 3 / span 1;
grid-column: 3 / span 1;
background-image: linear-gradient(
45deg,
#edd85f 25%,
#0f2b3d 25%,
#0f2b3d 50%,
#edd85f 50%,
#edd85f 75%,
#0f2b3d 75%,
#0f2b3d 100%
);
background-size: 56.57px 56.57px;
color: white;
font-size: large;
font-weight: bold;
text-shadow: 4px 4px 4px #2c3e50;
}
</style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment