https://github.com/iozcelik/SarissaPagination

https://github.com/iozcelik/SarissaPagination

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/iozcelik/SarissaPagination
• Owner: iozcelik
• Created: 2022-04-12T07:24:42.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-06-11T18:03:23.000Z (over 2 years ago)
• Last Synced: 2024-11-07T18:03:44.388Z (about 1 month ago)
• Language: Astro
• Size: 436 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-astro - Sarissa Pagination - Add page number buttons for pagination. Automatically add and disable numbers as current page number. (Astro Packages/Libraries)

README

        
# @sarissa/pagination

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



## Installation

```js

npm install @sarissa/pagination

```

## Usage

```js

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

//Must set your total page count

const totalPage = 10;

---

      .activeButton {

        --tw-bg-opacity: 1;

        background-color: rgb(239 68 68 / var(--tw-bg-opacity));

        color: wheat;

      }

```

### 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')