From 79ec1b9dc1227ff5dfc6a45016867ea96041dbc2 Mon Sep 17 00:00:00 2001 From: Julian Leucker <leuckerj@gmail.com> Date: Mon, 20 Feb 2023 14:29:13 +0100 Subject: [PATCH] Create example 8 to show responsiveness --- docs/.vuepress/config.js | 1 + docs/examples/Responsive.md | 12 ++++++++ example/src/App.vue | 7 ++++- example/src/Example8Responsive.vue | 46 ++++++++++++++++++++++++++++++ 4 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 docs/examples/Responsive.md create mode 100644 example/src/Example8Responsive.vue diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index e800988..16b55c3 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -14,6 +14,7 @@ module.exports = { '/examples/Colors.md', '/examples/Disabled.md', '/examples/DisabledItems.md', + '/examples/Responsive.md', ] } ], diff --git a/docs/examples/Responsive.md b/docs/examples/Responsive.md new file mode 100644 index 0000000..3d87a0a --- /dev/null +++ b/docs/examples/Responsive.md @@ -0,0 +1,12 @@ +# Example 8: Responsive + +The grid is responsive. Try resizing it below: + +<ClientOnly> +<script setup> +import Example8Responsive from "../../example/src/Example8Responsive.vue"; +</script> + + +<Example8Responsive /> +</ClientOnly> \ No newline at end of file diff --git a/example/src/App.vue b/example/src/App.vue index a1c4b3e..e0f7b1e 100644 --- a/example/src/App.vue +++ b/example/src/App.vue @@ -6,6 +6,7 @@ import Example4Lessons from "./Example4Lessons.vue"; import Example5Colors from "./Example5Colors.vue"; import Example6Disabled from "./Example6Disabled.vue"; import Example7DisabledItems from "./Example7DisabledItems.vue"; +import Example8Responsive from "./Example8Responsive.vue"; </script> <template> @@ -73,7 +74,7 @@ import Example7DisabledItems from "./Example7DisabledItems.vue"; <example6-disabled></example6-disabled> </div> - <div> + <div style="height: 100%"> <h2>Example 7: Disabled fields and items with props</h2> <p> This is a grid with disabled fields and items. Red items are disabled @@ -83,6 +84,10 @@ import Example7DisabledItems from "./Example7DisabledItems.vue"; <example7-disabled-items></example7-disabled-items> </div> </div> + + <h2>Example 8:</h2> + <p>The grid is responsive. Try resizing it below:</p> + <example8-responsive></example8-responsive> </div> </template> diff --git a/example/src/Example8Responsive.vue b/example/src/Example8Responsive.vue new file mode 100644 index 0000000..ebf5419 --- /dev/null +++ b/example/src/Example8Responsive.vue @@ -0,0 +1,46 @@ +<template> + <div class="parent"> + <drag-grid v-model="items" :cols="4" :rows="4" class="grid"> + <template #item="{ key }"> + <div class="banana"> + {{ key }} + </div> + </template> + </drag-grid> + </div> +</template> + +<script> +export default { + name: "Example8Responsive", + data() { + return { + items: [ + { x: 1, y: 1, w: 1, h: 3, key: "item 1" }, + { x: 4, y: 3, w: 1, h: 1, key: "item 2" }, + { x: 2, y: 4, w: 2, h: 1, key: "item 3" }, + ], + }; + }, +}; +</script> + +<style scoped> +.parent { + min-height: 600px; +} + +.grid { + resize: both; + overflow: auto; + aspect-ratio: 1; + border: #edd85f 2px solid; + width: 400px; +} + +.banana { + background: #edd85f; + width: 100%; + height: 100%; +} +</style> -- GitLab