improve examples

KingSora · Jul 29, 2024 · c68096a · c68096a
1 parent cbed79d
commit c68096a
Show file tree

Hide file tree

Showing 25 changed files with 119 additions and 111 deletions.
diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts
@@ -16,6 +16,7 @@ const initBodyOverlayScrollbars = (force?: boolean) =>
     {
       scrollbars: {
         theme: 'os-theme-light',
+        clickScroll: true,
       },
     }
   ).state().destroyed;
@@ -29,7 +30,7 @@ const initBodyOverlayScrollbars = (force?: boolean) =>
           OverlayScrollbars Ngx
         </a>
       </h1>
-      <section class="slot">
+      <section>
         <div
           overlay-scrollbars
           #osRef
@@ -77,7 +78,7 @@ const initBodyOverlayScrollbars = (force?: boolean) =>
         <p class="title">Events:</p>
         <div class="items">
           <div
-            *ngFor="let observedEvent of observedEvents$ | async | keyvalue: originalOrder"
+            *ngFor="let observedEvent of observedEvents$ | async | keyvalue : originalOrder"
             [ngClass]="{ event: true, active: observedEvent.value.active }"
           >
             {{ observedEvent.key }}

diff --git a/examples/angular/src/main.ts b/examples/angular/src/main.ts
@@ -1,7 +1,9 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import { AppModule } from './app/app.module';
 
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .catch((err) => console.error(err));
diff --git a/examples/angular/src/styles.css b/examples/angular/src/styles.css
@@ -104,30 +104,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars-ngx {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars-ngx {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {

diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -33,7 +33,7 @@ <h1>
             OverlayScrollbars
           </a>
         </h1>
-        <section class="slot">
+        <section>
           <div id="target" class="overlayscrollbars" data-overlayscrollbars-initialize>
             <div id="targetContent" class="logo">
               <img alt="Logo" src="logo.png" width="333" height="333" />

diff --git a/examples/browser/script.js b/examples/browser/script.js
@@ -1,4 +1,11 @@
-const { OverlayScrollbars } = OverlayScrollbarsGlobal;
+const { OverlayScrollbars, ClickScrollPlugin } = OverlayScrollbarsGlobal;
 
-OverlayScrollbars(document.body, {});
+// optional: use the ClickScrollPlugin to make the option "scrollbars.clickScroll: true" available
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
+OverlayScrollbars(document.body, {
+  scrollbars: {
+    clickScroll: true,
+  },
+});
 OverlayScrollbars(document.getElementById('target'), {});
diff --git a/examples/browser/styles.css b/examples/browser/styles.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {

diff --git a/examples/node/index.html b/examples/node/index.html
@@ -21,7 +21,7 @@ <h1>
             OverlayScrollbars
           </a>
         </h1>
-        <section class="slot">
+        <section>
           <div id="target" class="overlayscrollbars" data-overlayscrollbars-initialize>
             <div id="targetContent" class="logo">
               <img alt="Logo" src="logo.png" width="333" height="333" />

diff --git a/examples/node/src/script.js b/examples/node/src/script.js
@@ -1,5 +1,12 @@
 import 'overlayscrollbars/overlayscrollbars.css';
-import { OverlayScrollbars } from 'OverlayScrollbars';
+import { OverlayScrollbars, ClickScrollPlugin } from 'OverlayScrollbars';
 
-OverlayScrollbars(document.body, {});
+// optional: use the ClickScrollPlugin to make the option "scrollbars.clickScroll: true" available
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
+OverlayScrollbars(document.body, {
+  scrollbars: {
+    clickScroll: true,
+  },
+});
 OverlayScrollbars(document.getElementById('target'), {});
diff --git a/examples/node/styles.css b/examples/node/styles.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {

diff --git a/examples/overlayscrollbars/index.html b/examples/overlayscrollbars/index.html
@@ -21,7 +21,7 @@ <h1>
             OverlayScrollbars
           </a>
         </h1>
-        <section class="slot">
+        <section>
           <div id="target" class="overlayscrollbars" data-overlayscrollbars-initialize>
             <div id="targetContent" class="logo">
               <img alt="Logo" src="logo.png" width="333" height="333" />

diff --git a/examples/overlayscrollbars/src/bodyOverlayScrollbars.ts b/examples/overlayscrollbars/src/bodyOverlayScrollbars.ts
@@ -10,7 +10,11 @@ const initBodyOverlayScrollbars = (force?: boolean) =>
         body: force ? false : null,
       },
     },
-    {}
+    {
+      scrollbars: {
+        clickScroll: true,
+      },
+    }
   ).state().destroyed;
 
 const toggleBodyOverlayScrollbarsSection = document.querySelector(

diff --git a/examples/overlayscrollbars/src/index.ts b/examples/overlayscrollbars/src/index.ts
@@ -1,3 +1,6 @@
 import 'overlayscrollbars/overlayscrollbars.css';
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import './actions.ts';
 import './bodyOverlayScrollbars.ts';
+
+OverlayScrollbars.plugin(ClickScrollPlugin);
diff --git a/examples/overlayscrollbars/styles.css b/examples/overlayscrollbars/styles.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -31,6 +31,7 @@ const App = () => {
     options: {
       scrollbars: {
         theme: 'os-theme-light',
+        clickScroll: true,
       },
     },
   });
@@ -86,7 +87,7 @@ const App = () => {
             OverlayScrollbars React
           </a>
         </h1>
-        <section className="slot">
+        <section>
           {overlayScrollbarsApplied ? (
             <OverlayScrollbarsComponent
               className="overlayscrollbars-react"

diff --git a/examples/react/src/index.css b/examples/react/src/index.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars-react {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars-react {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {

diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import 'overlayscrollbars/overlayscrollbars.css';
 import './index.css';
 import App from './App';
 
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>

diff --git a/examples/solid/src/App.tsx b/examples/solid/src/App.tsx
@@ -30,6 +30,7 @@ const App: Component = () => {
     options: {
       scrollbars: {
         theme: 'os-theme-light',
+        clickScroll: true,
       },
     },
   });
@@ -81,7 +82,7 @@ const App: Component = () => {
             OverlayScrollbars Solid
           </a>
         </h1>
-        <section class="slot">
+        <section>
           {overlayScrollbarsApplied() ? (
             <OverlayScrollbarsComponent
               class="overlayscrollbars-solid"

diff --git a/examples/solid/src/index.css b/examples/solid/src/index.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars-solid {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars-solid {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {