Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Scrollbar component #1744

Merged
merged 5 commits into from
Jun 30, 2023
Merged

Add Scrollbar component #1744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0e24b7a
add scrollbar component
juujisai Apr 26, 2023
c8b3b2b
Update scrollbar code + add documentation
juujisai Jun 28, 2023
86eb414
Add Scrollbar component to autoinits
juujisai Jun 29, 2023
2f9511e
Fix scroll. position issue + remove old from docs
juujisai Jun 30, 2023
229438e
Merge branch 'v1.0.0-beta3' of https://github.com/mdbootstrap/Tailwin…
juujisai Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Tailwind Elements [<img src="https://tailwind-elements.com/img/logo.png" width="45" align="right" alt="Tailwind-elements">](https://tailwind-elements.com/)<a href="https://www.npmjs.com/package/tw-elements"><img src="https://img.shields.io/npm/dt/tw-elements.svg" alt="Total Downloads"></a> <a href="https://github.com/mdbootstrap/Tailwind-Elements/releases"><img src="https://img.shields.io/npm/v/tw-elements.svg" alt="Latest Release"></a> <a href="https://twitter.com/intent/tweet/?text=Thanks+@TailwindElement+for+creating+an+amazing+collection+of+open+source+components+for+@tailwindcss%20https://tailwind-elements.com/&hashtags=tailwindCSS,bootstrap,webdesign,javascript,100DaysOfCode,DevCommunity"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>

Tailwind Elements is a huge collection of free, interactive components for Tailwind CSS.

<table>
<tbody>
<tr>
Expand Down
275 changes: 275 additions & 0 deletions demo/sites/methods/scrollbar.html
View file
Open in desktop
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>
5 changes: 5 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,11 @@ <h3 class="mb-5">Your sites:</h3>
class="mb-1 mr-1 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)]"
>Charts</a
>
<a
href="./demo/sites/methods/scrollbar.html"
class="mb-1 mr-1 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)]"
>Scrollbar</a
>
<a
href="./demo/sites/data/charts-advanced.html"
class="mb-1 mr-1 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)]"
Expand Down
21 changes: 21 additions & 0 deletions site/content/docs/standard/methods/scrollbar/a-ss.html
View file
Open in desktop
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>
Loading