docs: update examples texts 📃 (#43)

willnguyen1312 · May 10, 2023 · ddb0193 · ddb0193
1 parent e72271d
commit ddb0193
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 20 deletions.
diff --git a/examples/preact-ts/src/app.tsx b/examples/preact-ts/src/app.tsx
@@ -76,9 +76,12 @@ function App() {
       </nav>
 
       {zoomType === "wheel" && (
-        <div ref={imageWheelContainerRef} id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
-          <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
-        </div>
+        <>
+          <p>Scroll inside the image to see zoom in-out effect</p>
+          <div ref={imageWheelContainerRef} id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
+            <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
+          </div>
+        </>
       )}
 
       {zoomType === "hover" && (

diff --git a/examples/qwik-ts/src/routes/index.tsx b/examples/qwik-ts/src/routes/index.tsx
@@ -73,9 +73,12 @@ export default component$(() => {
       </nav>
 
       {zoomType.value === "wheel" && (
-        <div ref={imageWheelContainerRef} id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
-          <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
-        </div>
+        <>
+          <p>Scroll inside the image to see zoom in-out effect</p>
+          <div ref={imageWheelContainerRef} id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
+            <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
+          </div>
+        </>
       )}
 
       {zoomType.value === "hover" && (

diff --git a/examples/react-ts/src/App.tsx b/examples/react-ts/src/App.tsx
@@ -78,9 +78,12 @@ function App() {
       </nav>
 
       {zoomType === "wheel" && (
-        <div ref={imageWheelContainerRef} id="image-wheel-container" className="w-[300px] h-[300px] cursor-crosshair">
-          <img className="w-full h-full" alt="Large Pic" src="/large.webp" />
-        </div>
+        <>
+          <p>Scroll inside the image to see zoom in-out effect</p>
+          <div ref={imageWheelContainerRef} id="image-wheel-container" className="w-[300px] h-[300px] cursor-crosshair">
+            <img className="w-full h-full" alt="Large Pic" src="/large.webp" />
+          </div>
+        </>
       )}
 
       {zoomType === "hover" && (

diff --git a/examples/solid-ts/src/App.tsx b/examples/solid-ts/src/App.tsx
@@ -74,9 +74,12 @@ const App: Component = () => {
       </nav>
 
       {zoomType() === "wheel" && (
-        <div ref={imageWheelContainer} id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
-          <img class="w-full h-full" alt="Large Pic" src="/large.webp" elementtiming="" fetchpriority="high" />
-        </div>
+        <>
+          <p>Scroll inside the image to see zoom in-out effect</p>
+          <div ref={imageWheelContainer} id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
+            <img class="w-full h-full" alt="Large Pic" src="/large.webp" elementtiming="" fetchpriority="high" />
+          </div>
+        </>
       )}
 
       {zoomType() === "hover" && (

diff --git a/examples/svelte-ts/src/App.svelte b/examples/svelte-ts/src/App.svelte
@@ -65,6 +65,7 @@
   </nav>
 
   {#if zoomType === "wheel"}
+    <p>Scroll inside the image to see zoom in-out effect</p>
     <div bind:this={imageWheelContainer} id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
       <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
     </div>

diff --git a/examples/vanilla-ts/index.html b/examples/vanilla-ts/index.html
@@ -23,6 +23,7 @@
     </nav>
 
     <template id="image-wheel">
+      <p>Scroll inside the image to see zoom in-out effect</p>
       <div id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
         <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
       </div>

diff --git a/examples/vue-ts/src/App.vue b/examples/vue-ts/src/App.vue
@@ -83,14 +83,12 @@ onUnmounted(() => {
       >
     </nav>
 
-    <div
-      v-if="zoomType === 'wheel'"
-      ref="imageWheelContainerRef"
-      id="image-wheel-container"
-      class="w-[300px] h-[300px] cursor-crosshair"
-    >
-      <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
-    </div>
+    <template v-if="zoomType === 'wheel'">
+      <p>Scroll inside the image to see zoom in-out effect</p>
+      <div ref="imageWheelContainerRef" id="image-wheel-container" class="w-[300px] h-[300px] cursor-crosshair">
+        <img class="w-full h-full" alt="Large Pic" src="/large.webp" />
+      </div>
+    </template>
 
     <div
       v-if="zoomType === 'hover'"