-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add scrollbar component * Update scrollbar code + add documentation * Add Scrollbar component to autoinits * Fix scroll. position issue + remove old from docs
- Loading branch information
Showing
18 changed files
with
2,384 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,275 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta name="description" content="" /> | ||
| <meta name="author" content="Tailwind Elements" /> | ||
| <title>Scrollbar</title> | ||
|
|
||
| <!-- Roboto font --> | ||
| <link | ||
| href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" | ||
| rel="stylesheet" /> | ||
| <!-- Tailwind --> | ||
| <link rel="stylesheet" href="../../../src/scss/tailwind.scss" /> | ||
| <!-- PRISM --> | ||
| <link rel="stylesheet" href="../../dev/css/new-prism.css" /> | ||
| <!-- Theme --> | ||
| <meta name="theme-color" content="#f8fafc" /> | ||
| <script> | ||
| try { | ||
| if ( | ||
| localStorage.theme === "dark" || | ||
| (!("theme" in localStorage) && | ||
| window.matchMedia("(prefers-color-scheme: dark)").matches) | ||
| ) { | ||
| document.documentElement.classList.add("dark"); | ||
| document | ||
| .querySelector('meta[name="theme-color"]') | ||
| .setAttribute("content", "#0B1120"); | ||
| } else { | ||
| document.documentElement.classList.remove("dark"); | ||
| } | ||
| } catch (_) {} | ||
| </script> | ||
| <!-- Custom styles --> | ||
| <style></style> | ||
| </head> | ||
|
|
||
| <body class="dark:bg-neutral-800"> | ||
| <!-- Start your project here--> | ||
| <div class="mx-96"> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <p class="mb-4">Basic example</p> | ||
| <div | ||
| data-te-perfect-scrollbar-init | ||
| class="relative h-[400px] w-[600px] overflow-hidden"> | ||
| <img | ||
| src="https://tecdn.b-cdn.net/img/new/slides/041.webp" | ||
| alt="Wild Landscape" | ||
| class="h-[700px] w-[1000px] max-w-none" /> | ||
| </div> | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <p class="mb-4">Options</p> | ||
|
|
||
| <p class="mb-4">JavaScript init</p> | ||
| <div id="init-by-js" class="relative h-[400px] w-[600px] overflow-hidden"> | ||
| <img | ||
| src="https://tecdn.b-cdn.net/img/new/slides/041.webp" | ||
| alt="Wild Landscape" | ||
| class="h-[700px] w-[1000px] max-w-none" /> | ||
| </div> | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <p class="mb-4">Data attributes</p> | ||
| <div | ||
| data-te-perfect-scrollbar-init | ||
| data-te-suppress-scroll-x="true" | ||
| class="relative h-[400px] w-[600px] overflow-hidden"> | ||
| <img | ||
| src="https://tecdn.b-cdn.net/img/new/slides/041.webp" | ||
| alt="..." | ||
| class="h-[700px] w-[1000px] max-w-none" /> | ||
| </div> | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <p class="mb-4">Colors example</p> | ||
| <div | ||
| id="scroll-colors" | ||
| class="relative h-[400px] w-[600px] overflow-hidden"> | ||
| <img | ||
| src="https://tecdn.b-cdn.net/img/new/slides/041.webp" | ||
| alt="..." | ||
| class="h-[700px] w-[1000px] max-w-none" /> | ||
| </div> | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <p class="mb-4">Events</p> | ||
|
|
||
| <div class="mb-3 xl:w-96"> | ||
| <select data-te-select-init id="select-events"> | ||
| <option value="scrollX">ScrollX</option> | ||
| <option value="scrollY">ScrollY</option> | ||
| <option value="scrollUp">ScrollUp</option> | ||
| <option value="scrollDown">ScrollDown</option> | ||
| <option value="scrollLeft">ScrollLeft</option> | ||
| <option value="scrollRight">ScrollRight</option> | ||
| <option value="scrollXEnd">ScrollXEnd</option> | ||
| <option value="scrollYEnd">ScrollYEnd</option> | ||
| <option value="scrollXStart">ScrollXStart</option> | ||
| <option value="scrollYStart">ScrollYStart</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div id="scroll-x" class="relative h-[400px] w-[600px] overflow-hidden"> | ||
| <img | ||
| src="https://tecdn.b-cdn.net/img/new/slides/041.webp" | ||
| alt="Wild Landscape" | ||
| class="h-[700px] w-[1000px] max-w-none" /> | ||
| </div> | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <!-- Button trigger modal --> | ||
| <button | ||
| type="button" | ||
| class="hidden rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]" | ||
| data-te-toggle="modal" | ||
| data-te-target="#exampleModal" | ||
| data-te-ripple-init | ||
| data-te-ripple-color="light"> | ||
| Launch demo modal | ||
| </button> | ||
|
|
||
| <!-- Modal --> | ||
| <div | ||
| data-te-modal-init | ||
| class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" | ||
| id="exampleModal" | ||
| tabindex="-1" | ||
| aria-labelledby="exampleModalLabel" | ||
| aria-hidden="true"> | ||
| <div | ||
| data-te-modal-dialog-ref | ||
| class="pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px]"> | ||
| <div | ||
| class="min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)] pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-600"> | ||
| <div | ||
| class="flex flex-shrink-0 items-center justify-between rounded-t-md border-b-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50"> | ||
| <!--Modal title--> | ||
| <h5 | ||
| class="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200" | ||
| id="exampleModalLabel"> | ||
| Scroll exmaple | ||
| </h5> | ||
| <!--Close button--> | ||
| <button | ||
| type="button" | ||
| class="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none" | ||
| data-te-modal-dismiss | ||
| aria-label="Close"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke-width="1.5" | ||
| stroke="currentColor" | ||
| class="h-6 w-6"> | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="M6 18L18 6M6 6l12 12" /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
|
|
||
| <!--Modal body--> | ||
| <div class="relative flex-auto p-4" data-te-modal-body-ref>...</div> | ||
|
|
||
| <!--Modal footer--> | ||
| <div | ||
| class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md border-t-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50"> | ||
| <button | ||
| type="button" | ||
| class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200" | ||
| data-te-modal-dismiss | ||
| data-te-ripple-init | ||
| data-te-ripple-color="light"> | ||
| Close | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- End your project here--> | ||
|
|
||
| <!-- Theme switcher --> | ||
| <script type="module" src="../../../src/js/theme.js"></script> | ||
| <!-- PRISM --> | ||
| <script type="module" src="../../dev/js/new-prism.js"></script> | ||
| <!-- MDB SNIPPET --> | ||
| <script type="module" src="../../dev/js/dist/mdbsnippet.min.js"></script> | ||
| <!-- Custom scripts --> | ||
| <script type="module"> | ||
| import * as te from "../../../src/js/index.umd.js"; | ||
|
|
||
| // JavaScript init | ||
| const initByJS = document.querySelector("#init-by-js"); | ||
| const psInitbyJS = new te.PerfectScrollbar(initByJS); | ||
| // JavaScript init | ||
|
|
||
| // Scroll colors | ||
| const scrollColors = document.querySelector("#scroll-colors"); | ||
| const initScrollColors = new te.PerfectScrollbar( | ||
| scrollColors, | ||
| {}, | ||
| { | ||
| railXColors: | ||
| "group-[&.ps--active-x]/ps:!bg-[#90ee90] hover:!bg-[#eee] focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee]", | ||
| railXThumbColors: | ||
| "!bg-[#006400] group-hover/x:bg-[#999] group-focus/x:bg-[#999] group-[&.ps--clicking]/x:bg-[#999]", | ||
| railYColors: | ||
| "group-[&.ps--active-y]/ps:!bg-[#90ee90] hover:!bg-[#eee] focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee]", | ||
| railYThumbColors: | ||
| "!bg-[#006400] group-hover/y:bg-[#999] group-focus/y:bg-[#999] group-[&.ps--clicking]/y:bg-[#999]", | ||
| } | ||
| ); | ||
|
|
||
| // Scroll colors | ||
|
|
||
| // Events | ||
| const btn = document.querySelector('[data-te-toggle="modal"]'); | ||
| const btnID = document.querySelector("#exampleModalLabel"); | ||
| const modalBody = document.querySelector("[data-te-modal-body-ref]"); | ||
|
|
||
| const toggleBtn = (text) => { | ||
| btnID.innerHTML = `Scroll${text} example`; | ||
| modalBody.innerHTML = `You scrolled with scroll${text} event`; | ||
| btn.click(); | ||
| }; | ||
|
|
||
| const scrollX = document.querySelector("#scroll-x"); | ||
| const initscrollX = new te.PerfectScrollbar(scrollX); | ||
|
|
||
| const select = document.querySelector("#select-events"); | ||
|
|
||
| const dispatchEvent = ({ target }) => { | ||
| const events = target.value.split("scroll").join(""); | ||
| scrollX.addEventListener(`${target.value}.te.ps`, (e) => | ||
| toggleBtn(events) | ||
| ); | ||
| }; | ||
|
|
||
| select.addEventListener("valueChange.te.select", (e) => { | ||
| dispatchEvent(e); | ||
| }); | ||
|
|
||
| select.addEventListener("open.te.select", (e) => { | ||
| scrollX.removeEventListener(`${e.target.value}.te.ps`, dispatchEvent); | ||
| scrollX.removeEventListener(`ps-scroll-y`, dispatchEvent); | ||
| }); | ||
|
|
||
| //Events | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| --- | ||
| --- | ||
|
|
||
| <li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active> | ||
| <a href="#api-section-import">Import</a> | ||
| </li> | ||
| <li class="mb-1 pl-[9px] text-[0.85rem]"> | ||
| <a href="#api-section-usage">Usage</a> | ||
| </li> | ||
| <li class="mb-1 pl-[9px] text-[0.85rem]"> | ||
| <a href="#api-section-options">Options</a> | ||
| </li> | ||
| <li class="mb-1 pl-[9px] text-[0.85rem]"> | ||
| <a href="#api-section-classes">Classes</a> | ||
| </li> | ||
| <li class="mb-1 pl-[9px] text-[0.85rem]"> | ||
| <a href="#api-section-methods">Methods</a> | ||
| </li> | ||
| <li class="mb-1 pl-[9px] text-[0.85rem]"> | ||
| <a href="#api-section-events">Events</a> | ||
| </li> |
Oops, something went wrong.