Pagination

View component on Github This page on Github

Example

x-model:

<div x-data="{ model: 1 }" class="flex flex-col items-center">
  <nav
    x-data="pagination"
    x-model="model"
    data-items-count="70"
    data-max-pages="7"
    data-items-per-page="8"
    class="flex w-auto gap-x-2"
  >
    <a
      x-bind="prevButton"
      class="flex w-12 cursor-pointer flex-col items-center justify-center rounded-sm border border-gray-300 p-2 text-sm font-medium hover:bg-secondary-50 dark:border-dark-600 dark:text-text-300 dark:hover:bg-dark-700"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          fill-rule="evenodd"
          d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"
        />
      </svg>
    </a>
    <template x-for="page in getPages">
      <a
        x-bind="pageButton"
        x-text="page"
        class="z-10 flex h-10 w-12 flex-none cursor-pointer items-center justify-center rounded-sm border text-sm font-semibold transition-shadow"
        class-default="border-gray-300 hover:bg-secondary-50 dark:border-dark-600 dark:text-text-300 dark:hover:bg-dark-800"
        class-selected="border-primary-200 bg-primary-500 font-semibold text-white ring-2 ring-primary-200 hover:bg-primary-400 dark:border-primary-200 dark:bg-primary-500 dark:text-text-100 dark:ring-primary-200 dark:hover:bg-primary-400"
      >
      </a>
    </template>
    <a
      x-bind="nextButton"
      class="flex w-12 cursor-pointer flex-col items-center justify-center rounded-sm border border-gray-300 p-2 text-sm font-medium hover:bg-secondary-50 dark:border-dark-600 dark:text-text-300 dark:hover:bg-dark-700"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        viewBox="0 0 16 16"
      >
        <path
          fill-rule="evenodd"
          d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
        />
      </svg>
    </a>
  </nav>
  <div class="mx-auto mt-4 w-max font-mono text-lg">x-model: <span x-text="model"></span></div>
</div>

Usage

<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/pagination/dist/cdn.min.js"></script>

The data for the component is provided by the pagination function in the x-data directive and the props in the data-* attributes.

Props


          data-items-count


            Number

Total number of items. Pagination uses this value to compute the number of pages to render. It is usually provided by another component that uses pagination for navigation.


data-items-per-page


Number

Number of items per page. Pagination uses this value to compute the number of pages to render. It is usually provided by another component that uses pagination for navigation. 0 disables pagination (displays only 1 page).


data-max-pages


Number

Maximum number of pages to display. This prop must have value of 3 or more.

Litewind-alpine 0.1.0

Components Documentation

Contents