fix: fix svelte README

daybrush · Jun 19, 2023 · 6ddffb7 · 6ddffb7
1 parent 4f7d4ce
commit 6ddffb7
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/packages/infinite-viewer/test/iframe.html b/packages/infinite-viewer/test/iframe.html
@@ -0,0 +1,54 @@
+<meta charset="utf-8">
+<meta name="viewport"
+    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+<style>
+    html,
+    body,
+    #root,
+    .app {
+        position: relative;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        color: #333;
+        background: #fdfdfd;
+    }
+    .app {
+        transform-style: preserve-3d;
+    }
+</style>
+<div class="app">
+    <iframe id="iframe" width="100%" height="100%"></iframe>
+</div>
+<script src="../dist/infinite-viewer.js"></script>
+<script>
+    const iframeWindow = iframe.contentWindow;
+    const iframeDocument = iframeWindow.document;
+    const iframeBody = iframeDocument.body;
+
+    iframeBody.innerHTML = `
+<style>
+    .container {
+        width: 100%;
+        height: 100%;
+    }
+    .viewport {
+        position: relative;
+        width: 400px;
+        height: 600px;
+        background: #999;
+    }
+</style>
+<div class="container">
+    <div class="viewport">
+    </div>
+</div>
+    `;
+    const viewer = new InfiniteViewer(
+        iframeBody.querySelector(".container"),
+        {
+            autoZoom: true,
+        },
+    );
+</script>
diff --git a/packages/svelte-infinite-viewer/README.md b/packages/svelte-infinite-viewer/README.md
@@ -27,18 +27,32 @@
     <a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
 </p>
 
+
+* [Simple Demo](https://stackblitz.com/edit/vitejs-vite-p14cgg?file=src%2Flib%2FCounter.svelte,src%2FApp.svelte&terminal=dev)
+
+
 ## ⚙️ Installation
 ### npm
 ```bash
 $ npm install svelte-infinite-viewer
 ```
 
 ## 🚀 How to use
+* The viewer's class name must be set globally and use `className` prop.
 
 ```html
 <script>
 import InfiniteViewer from "svelte-infinite-viewer";
 </script>
+<style>
+    :global(.viewer) {
+        width: 100%;
+        height: 100%;
+    }
+    .viewport {
+        width: 400px;
+        height: 600px;
+    }
 ```
 ```jsx
 <InfiniteViewer