diff --git a/README.md b/README.md index 2682c0d5c..67648b955 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Tailwind Elements [Tailwind-elements](https://tailwind-elements.com/)Total Downloads Latest Release Tailwind Elements is a huge collection of free, interactive components for Tailwind CSS. - + diff --git a/demo/sites/methods/scrollbar.html b/demo/sites/methods/scrollbar.html new file mode 100644 index 000000000..1b8b6a23e --- /dev/null +++ b/demo/sites/methods/scrollbar.html @@ -0,0 +1,275 @@ + + + + + + + + Scrollbar + + + + + + + + + + + + + + + + +
+
+
+
+ +

Basic example

+
+ Wild Landscape +
+ +
+
+
+ +

Options

+ +

JavaScript init

+
+ Wild Landscape +
+ +
+
+
+ +

Data attributes

+
+ ... +
+ +
+
+
+ +

Colors example

+
+ ... +
+ +
+
+
+ +

Events

+ +
+ +
+ +
+ Wild Landscape +
+ +
+
+
+ + + + + + +
+ + + + + + + + + + + + diff --git a/index.html b/index.html index eb1968a8e..a8554fff6 100644 --- a/index.html +++ b/index.html @@ -409,6 +409,11 @@

Your sites:

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 + Scrollbar + Import + +
  • + Usage +
    • +
  • + Options +
    • +
  • + Classes +
    • +
  • + Methods +
    • +
  • + Events +
    • diff --git a/site/content/docs/standard/methods/scrollbar/a.html b/site/content/docs/standard/methods/scrollbar/a.html new file mode 100644 index 000000000..8c06943b7 --- /dev/null +++ b/site/content/docs/standard/methods/scrollbar/a.html @@ -0,0 +1,900 @@ +--- +--- + + +
    + +
    + +

    + Import +

    + +

    + Importing components depends on how your application works. If you intend + to use the Tailwind Elements ES format, you must first import + the component and then initialize it with the initTE method. + If you are going to use the UMD format, just import the + tw-elements package. +

    + + + {{< twsnippet/no-demo id="api-example41" >}} + + +
    + + +
    + + +
    + +

    + Usage +

    + +

    Via data attributes

    + +

    + Add the data-te-perfect-scrollbar-init attribute to the + clickable element to apply the ripple effect. For ES format, you must + first import and call the initTE method. +

    + + + {{< twsnippet/no-demo id="api-example1" >}} + + + +

    Via JavaScript

    + + + {{< twsnippet/no-demo id="api-example2" >}} + + + +
    + +
    + + +
    + +

    + Options +

    + +

    + Options can be passed via data attributes or JavaScript. For data + attributes, append the option name to data-te-, as in + data-te-wheel-speed="2". +

    + +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Name + + Type + + Default + Description
    + handlers + + String[] + + ['click-rail', 'drag-thumb', 'keyboard', 'wheel', + 'touch'] + + It is a list of handlers to scroll the element. +
    + wheelSpeed + + Number + + 1 + + The scroll speed applied to mousewheel event. +
    + wheelPropagation + + Boolean + + true + + If this option is true, when the scroll reaches the end of + the side, mousewheel event will be propagated to parent + element. +
    + swipeEasing + + Boolean + + true + + If this option is true, swipe scrolling will be eased. +
    + minScrollbarLength + + Number | null + + null + + When set to an integer value, the thumb part of the + scrollbar will not shrink below that number of pixels. +
    + maxScrollbarLength + + Number | null + + null + + When set to an integer value, the thumb part of the + scrollbar will not expand over that number of pixels. +
    + scrollingThreshold + + Number + + 1000 + + This sets threshold for ps--scrolling-x and ps--scrolling-y + classes to remain. In the default CSS, they make scrollbars + shown regardless of hover state. The unit is millisecond. +
    + suppressScrollX + + Boolean + + false + + When set to true, the scrollbar in X-axis will not be + available, regardless of the content width. +
    + suppressScrollY + + Boolean + + false + + When set to true, the scroll bar in Y-axis will not be + available, regardless of the content height. +
    + scrollXMarginOffset + + Number + + 0 + + The number of pixels the content width can surpass the + container width without enabling the X-axis scroll bar. + Allows some "wiggle room" or "offset break", so that X-axis + scroll bar is not enabled just because of a few pixels. +
    + scrollYMarginOffset + + Number + + 0 + + The number of pixels the content width can surpass the + container width without enabling the Y-axis scroll bar. + Allows some "wiggle room" or "offset break", so that Y-axis + scroll bar is not enabled just because of a few pixels. +
    + positionRight + + Boolean + + true + + Changes the sides of scrollbar rails +
    + + + + + + + +
    + + +
    + +

    + Classes +

    + +

    + Custom classes can be passed via data attributes or JavaScript. For data + attributes, append the class name to + data-te-class, as in data-te-class-ps="". +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Name + + Default + Description
    + ps + + group/ps overflow-hidden [overflow-anchor:none] touch-none + + Sets styles for perfect scrollbar wrapper. +
    + railX + + group/x absolute bottom-0 h-[0.9375rem] hidden opacity-0 + transition-[background-color,_opacity] duration-200 + ease-linear motion-reduce:transition-none z-[1035] + group-[&.ps--active-x]/ps:block group-hover/ps:opacity-60 + group-focus/ps:opacity-60 + group-[&.ps--scrolling-x]/ps:opacity-60 hover:!opacity-90 + focus:!opacity-90 [&.ps--clicking]:!opacity-90 outline-none + + Adds styles for horizontal scrollbar rail. +
    + railXColors + + group-[&.ps--active-x]/ps:bg-transparent hover:!bg-[#eee] + focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee] + dark:hover:!bg-[#555] dark:focus:!bg-[#555] + dark:[&.ps--clicking]:!bg-[#555] + + Adds styles for horizontal scrollbar rail. Decides the color + of the x rail. +
    + railXThumb + + absolute bottom-0.5 rounded-md h-1.5 + group-focus/ps:opacity-100 group-active/ps:opacity-100 + [transition:background-color_.2s_linear,_height_.2s_ease-in-out] + group-hover/x:h-[11px] group-focus/x:h-[0.6875rem] + group-[&.ps--clicking]/x:bg-[#999] + group-[&.ps--clicking]/x:h-[11px] outline-none + + Adds styles for horizontal scrollbar thumb. +
    + railXThumbColors + + bg-[#aaa] group-hover/x:bg-[#999] group-focus/x:bg-[#999] + + Adds styles for horizontal scrollbar thumb. Decides the + color of the x thumb. +
    + railY + + group/y absolute right-0 w-[0.9375rem] hidden opacity-0 + transition-[background-color,_opacity] duration-200 + ease-linear motion-reduce:transition-none z-[1035] + group-[&.ps--active-y]/ps:block group-hover/ps:opacity-60 + group-focus/ps:opacity-60 + group-[&.ps--scrolling-y]/ps:opacity-60 hover:!opacity-90 + focus:!opacity-90 [&.ps--clicking]:!opacity-90 outline-none + + Adds styles for vertical scrollbar rail. +
    + railYColors + + group-[&.ps--active-y]/ps:bg-transparent hover:!bg-[#eee] + focus:!bg-[#eee] [&.ps--clicking]:!bg-[#eee] + dark:hover:!bg-[#555] dark:focus:!bg-[#555] + dark:[&.ps--clicking]:!bg-[#555] + + Adds styles for vertical scrollbar rail. Decides the color + of the y rail. +
    + railYThumb + + absolute right-0.5 rounded-md w-1.5 + group-focus/ps:opacity-100 group-active/ps:opacity-100 + [transition:background-color_.2s_linear,_width_.2s_ease-in-out,_opacity] + group-hover/y:w-[11px] group-focus/y:w-[0.6875rem] + group-[&.ps--clicking]/y:w-[11px] outline-none + + Adds styles for vertical scrollbar thumb. +
    + railYThumbColors + + bg-[#aaa] group-hover/y:bg-[#999] group-focus/y:bg-[#999] + group-[&.ps--clicking]/y:bg-[#999] + + Adds styles for vertical scrollbar thumb. Decides the color + of the y thumb. +
    +
    +
    +
    +
    +
    + + +
    + + +
    + +

    + Methods +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Method + + Description + Example
    + dispose + + Destroy PerfectScrollbar instance. + + myPs.dispose() +
    + getInstance + + Static method which allows you to get the perfect scrollbar + instance associated to a DOM element. + + PerfectScrollbar.getInstance(myPs) +
    + getOrCreateInstance + + Static method which returns the perfect scrollbar instance + associated to a DOM element or create a new one in case it + wasn't initialized. + + PerfectScrollbar.getOrCreateInstance(myPs) +
    + update + + Update PerfectScrollbar + + myPs.update() +
    +
    +
    +
    +
    + + + {{< twsnippet/no-demo id="api-example3" >}} + + +
    + + + +
    + +

    + Events +

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Event type + Description
    + scrollX.te.ps + + This event fires when the x-axis is scrolled in either + direction. +
    + scrollY.te.ps + + This event fires when the y-axis is scrolled in either + direction. +
    + scrollUp.te.ps + + This event fires when scrolling upwards. +
    + scrollDown.te.ps + + This event fires when scrolling downwards. +
    + scrollLeft.te.ps + + This event fires when scrolling to the left. +
    + scrollRight.te.ps + + This event fires when scrolling to the right. +
    + scrollYStart.te.ps + + This event fires when scrolling reaches the start of the + y-axis. +
    + scrollXStart.te.ps + + This event fires when scrolling reaches the start of the + x-axis. +
    + scrollXEnd.te.ps + + This event fires when scrolling reaches the end of the + x-axis. +
    + scrollYEnd.te.ps + + This event fires when scrolling reaches the end of the + y-axis (useful for infinite scroll). +
    +
    +
    +
    +
    + + + {{< twsnippet/no-demo id="api-example6" >}} + + + +
    + diff --git a/site/content/docs/standard/methods/scrollbar/index-js.html b/site/content/docs/standard/methods/scrollbar/index-js.html new file mode 100644 index 000000000..ec40597dd --- /dev/null +++ b/site/content/docs/standard/methods/scrollbar/index-js.html @@ -0,0 +1,60 @@ +--- +--- + + diff --git a/site/content/docs/standard/methods/scrollbar/index-ss.html b/site/content/docs/standard/methods/scrollbar/index-ss.html new file mode 100644 index 000000000..0e08abbb1 --- /dev/null +++ b/site/content/docs/standard/methods/scrollbar/index-ss.html @@ -0,0 +1,20 @@ +--- +--- + +
  • + Basic example +
    • +
  • Options
    • +
  • + JavaScript init +
    • +
  • + Data attributes +
    • +
  • + Colors example +
    • +
  • Events
    • +
  • + Related resources +
    • diff --git a/site/content/docs/standard/methods/scrollbar/index.html b/site/content/docs/standard/methods/scrollbar/index.html new file mode 100644 index 000000000..3bbc75876 --- /dev/null +++ b/site/content/docs/standard/methods/scrollbar/index.html @@ -0,0 +1,765 @@ +--- +title: "Scrollbar" +date: 2023-03-07T16:00:58+02:00 +draft: false +main_title: "Tailwind Scrollbar method" +subheading: "Tailwind CSS Scrollbar" +seo_title: "Tailwind CSS Scrollbar - Free Examples & Tutorial" +description: "Scrollbar method which allows you to create a custom scrollbar." +image: "https://tecdn.b-cdn.net/img/docs/methods/ripple.webp" +video: "https://www.youtube.com/watch?v=-GmnyjgI4Jc&ab_channel=Keepcoding" +url: "/docs/standard/methods/scrollbar/" +menu: + methods: + name: "Scrollbar" +autoinits: "PerfectScrollbar" +--- + + +
    + +

    + Basic example +

    + +

    + Scrollbar is initialized automatically when you add + data-te-perfect-scrollbar-init attribute to your container. +

    + + + {{< twsnippet/demo id="example1">}} +
    +
    + Wild Landscape +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +
    + + + +
    + +

    + Options +

    +
    + + + +
    + +

    + JavaScript init +

    + +

    + You can easily init scrollbar with JavaScript. You have to invoke + PerfectScrollbar() or te.PerfectScrollbar() if you + are using UMD format and include options within that. +

    + + {{< twsnippet/demo id="example6" >}} +
    +
    + Wild Landscape +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Data attributes +

    + +

    + You can easily init scrollbar with options with + data-te-attributes. You have to add + data-te-perfect-scrollbar-init to your wrapper. If you want add + options with data-te-attr you have to add for example + data-te-suppress-scroll-x="true" to your container. +

    + + {{< twsnippet/demo id="example7" >}} +
    +
    + ... +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Colors example +

    + +

    + Scrollbar's thumb and rail's colors can be customized by changing the + default classes we add to them. Change the classes of the Scrollbar element + that you would like to edit: railXColors, + railXThumbColors, railYColors or + railYThumbColors. Visit the API section to see the default + classes for those elements. +

    + + {{< twsnippet/demo id="example8" >}} +
    +
    + ... +
    +
    + {{< /twsnippet/demo >}} + + + +
    + + + +
    + +

    + Events +

    + +

    PerfectScrollbar dispatches custom events.

    + + + +

    Example

    + +
    + +
    + + {{< twsnippet/demo id="example9" >}} +
    +
    + Wild Landscape +
    + + + + + + +
    + {{< /twsnippet/demo >}} + + + +
    + + +
    + +
    +

    + Related resources +

    + +
    + + Perfect Scrollbar +
    +
    diff --git a/site/layouts/partials/footer/footer-scripts.html b/site/layouts/partials/footer/footer-scripts.html index 3eab0c8ab..6e3d3e705 100644 --- a/site/layouts/partials/footer/footer-scripts.html +++ b/site/layouts/partials/footer/footer-scripts.html @@ -5,7 +5,6 @@ -