@sarissa/pagination

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

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 style of pagination buttons (default: flex items-center justify-center) buttonGroup | Style of button group (no default) button | Style of all page number buttons (default: relative flex-nowrap inline-flex items-center px-4 py-2 border text-sm font-medium) activeButton | Style of active page button (default: bg-sky-500 text-white) disabledButton | Style 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')