TA-Pagination - All functions and values

Alpine JS makes it easy to use functions as expressions in every directive. Learn more about every function and attribute and how to navigate through the pagination.

Functions

next(): - Jumps to the next page based on the pagination index. If the actual page is the last one the next page will be the first one. The function circles through all pages.

previous(): - Jumps to the previous page based on the slide index. If the actual page is the first one the previous page will be the last one. The function circles through all pages.

end(): Jumps to the last page of the pagination.

start(): Jumps to the first page of the pagination.

expand(): Removes the pagination and shows all elements.

shrink(): Switches back to the pagination mode after expanding.

Example

<div
    class="ta-pagination ta-pagination-anim-swing mt-6 mb-12 grid"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
>
    <!-- CONTENT -->
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="previous()"
        title="Go to previous page"
    >
        <span class="sr-only">Go to previous page</span>
        <!--- ICON /-->
    </button>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="next()"
        title="Go to next page"
    >
        <span class="sr-only">Go to next page</span>
        <!--- ICON /-->
    </button>
</div>

Values

TA-Pagination provides you with the following attributes you can use to improve the user experience.

initialized: Boolean - Is true after the pagination has been initialized.

is_expand: Boolean - If the pagination is removed and all elements are shown.

is_shrink: Boolean - If the pagination mode is on.

has_next: Boolean - If there is a next page after the actual one.

has_previous: Boolean - If there is a previous page before the actual one.

animating: Boolean - Is true if a transition is actually running.

page: Number - The actual page number.

Example

<div
    class="ta-pagination ta-pagination-anim-swing mt-6 mb-12 grid"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
>
    <!-- CONTENT -->
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="previous()"
        x-show="has_previous"
        title="Go to previous page"
    >
        <span class="sr-only">Go to previous page</span>
        <!--- ICON /-->
    </button>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="next()"
        x-show="has_next"
        title="Go to next page"
    >
        <span class="sr-only">Go to next page</span>
        <!--- ICON /-->
    </button>
</div>
TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy