TA-Pagination - List of all predefined CSS classes

Classes

Having a closer look at the basic example you might recognize the usage of some non Tailwind CSS class names. These classes are used to define some basics to get TA-Pagination running. Additionally the classes are defined to make it easy for you to start with TA-Pagination. If you use the Tailwind CSS Plugin everything is done for you. Here is a list of all defined classes and what they are for.

ta-pagination

ta-pagination - Used to define some basic stuff and default CSS properties. Use this class on the same level as you alpine directives.

Example

<div
    class="ta-pagination ta-pagination-anim-fade"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

ta-pagination-anim-XXX

Add your preferred transition. The default transition is swing and defined in the Tailwind CSS plugin. If you want to change the default transition or customize the Tailwind CSS plugin you should take a look at the Plugin documentation.

You can find more details about all predefined transitions in the transitions documentation as well as the instructions how to add your own animations to TA-Pagination. Here is a list of all available transitions generated by the Tailwind CSS plugin.

• ta-pagination-anim-swing
• ta-pagination-anim-spin
• ta-pagination-anim-swipe
• ta-pagination-anim-fade
• ta-pagination-anim-slide
• ta-pagination-anim-rotate
• ta-pagination-anim-snake
• ta-pagination-anim-window
• ta-pagination-anim-scroll
• ta-pagination-anim-fold

Example

<div
    class="ta-pagination ta-pagination-anim-swing"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

ta-pagination-item

ta-gallery-element - Every element you want to be part of your pagination should have this class.

Example

<div
    class="ta-pagination ta-pagination-anim-swing"
    x-data="taPagination()"
    x-init="init()"
>
    <div class="relative overflow-hidden" x-ref="content">
        <div class="ta-pagination-item">
            <!-- CONTENT -->
        </div>
        <!-- MORE ITEMS -->
    </div>
    <!-- BUTTONS -->
</div>

ta-pagination-lazy

ta-pagination-lazy - Used for a lazy loading of images inside of every element. To activate just add data-src=”” to the image and TA-Pagination will take care of the rest.

ta-pagination-navigation

ta-pagination-navigation - Only used if you want to unify the height of your pagination. Helps to prevent content and navigation from “jumping around”.

Example

<div
    class="ta-pagination ta-pagination-anim-swing"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
    <div
        class="ta-pagination-navigation"
        x-ref="navigation"
    >
        <!-- BUTTONS -->
    </div>
</div>

ta-pagination-item-border

ta-pagination-item-border- Adds a nice border between every element.

Hide with x-cloak

In some HTML tags in the basic structure you might have seen an attribute called x-cloak. This attribute will be removed after Alpine JS has done it’s magic. So with this information you could implement a very easy “hide-before-init” functionality without any issue. Here is a very common way to get this benefit.

/* your css styles */
[x-cloak] {
    display: none;
}

<div
    class="ta-pagination ta-pagination-anim-swing"
    x-data="taPagination()"
    x-init="init()"
>
    <div
        x-ref="content"
        x-cloak
    >
        <!-- CONTENT -->
    </div>
</div>