feat(docs): Splitter Image examples - remove scrollbars

docs/src/examples/QSplitter/ImageFun.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
+    <q-resize-observer @resize="onResize" />
     <q-splitter
       id="photos"
       v-model="splitterModel"
       :limits="[0, 100]"
-      style="height: 300px; width: 400px;"
+      :style="splitterStyle"
+      class="no-scroll"
     >
 
       <template v-slot:before class="no-scroll">
@@ -34,11 +36,26 @@ export default {
       width: 400,
       splitterModel: 50 // start at 50%
     }
+  },
+  methods: {
+    // we are using q-resize-observer to keep this example mobile-friendly
+    onResize (size) {
+      let potentialWidth = Math.abs(size.width)
+      this.width = Math.min(potentialWidth, 400)
+    }
+  },
+  computed: {
+    splitterStyle () {
+      return {
+        height: '300px',
+        width: this.width + 'px'
+      }
+    }
   }
 }
 </script>
 <style>
-/* .q-splitter__before, .q-splitter__after { */
-  /* overflow: hidden !important; */
-/* } */
+.no-scroll > .q-splitter__before, .no-scroll > .q-splitter__after {
+  overflow: hidden !important;
+}
 </style>

docs/src/examples/QSplitter/ReactiveImages.vue

@@ -3,6 +3,7 @@
     <q-splitter
       v-model="splitterModel"
       style="height: 400px"
+      class="no-scroll"
     >
 
       <template v-slot:before>
@@ -32,3 +33,8 @@ export default {
   }
 }
 </script>
+<style>
+.no-scroll > .q-splitter__before, .no-scroll > .q-splitter__after {
+  overflow: hidden !important;
+}
+</style>

docs/src/pages/vue-components/splitter.md

@@ -1,5 +1,9 @@
 ---
 title: QSplitter
+related:
+  - /vue-components/expansion-item
+  - /vue-components/slide-item
+  - /vue-components/separator
 ---
 
 The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar.

quasar/src/components/splitter/QSplitter.json

@@ -2,7 +2,7 @@
   "props": {
     "value": {
       "type": "Number",
-      "desc": "Model of the component defining the split ratio (0.0 < x < 100.0) beetween panes; Either use this property (along with a listener for 'input' event) OR use v-model directive",
+      "desc": "Model of the component defining the split ratio percent (0.0 < x < 100.0) between panes; Either use this property (along with a listener for 'input' event) OR use v-model directive",
       "examples": [ "v-model=\"ratio\"" ]
     },