/SarissaPagination

Primary LanguageAstro

@sarissa/pagination

Add page number buttons for pagination. Automaticly add and disable numbers as current page number.

image

Installation

npm install @sarissa/pagination

Usage

import { Pagination } from "@sarissa/pagination";

//Must set your total page count
const totalPage = 10;
---
<style is:global>
      .activeButton {
        --tw-bg-opacity: 1;
        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
        color: wheat;
      }
</style>

<Pagination currentPage="1" {totalPage} url="posts" />

<Pagination currentPage="3" {totalPage} url="posts" activeButton="activeButton"
    />

Component Props

Name Description
outerDiv Outer div classes of pagination buttons (default: flex items-center justify-center)
buttonGroup Classes of button group (no default)
button Classes of all page number buttons (default: relative flex-nowrap inline-flex items-center px-4 py-2 border text-sm font-medium)
activeButton Classes of active page button (default: bg-sky-500 text-white)
disabledButton Classes of disabled buttons (default: disabled:opacity-75)
currentPage Current page number (required)
totalPage Total page numbers (required)
url Url of slug (required. ex: 'post','categories')