1.0.3 • Published 2 years ago
@sarissa/pagination v1.0.3
@sarissa/pagination
Add page number buttons for pagination. Automaticly add and disable numbers as current page number.
Installation
npm install @sarissa/paginationUsage
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') |