![Twitter](https://img.shields.io/twitter/follow/:twitterHandle.svg?style=social&label=@joaquimnetocel)
Pagination is an excellent method for organizing website content into separate pages so users can find the desired page/content. It is a feature we can use on a blog page, a product page, or any other page with a lot of content that we want to distribute across multiple pages.
pagination-svelte is a light weight svelte component that enables the user to select a specific page from a range of pages.
![PAGINATION](https://github.com/joaquimnetocel/pagination-svelte/raw/HEAD/./image.png)
VERSIONS
- VERSION 1.0.0 OR ABOVE WORKS WITH SVELTE 5 ONLY (NEWER AND RECOMMENDED VERSIONS WITH IMPROVEMENTS!)
- PREVIOUS VERSIONS WORKS WITH SVELTE 3, 4 AND 5.
FEATURES
- NON-OPINIONATED STYLING.
- NON-OPINIONATED POSITIONING.
- TYPESCRIPT SUPPORT.
INSTALLATION
npm install pagination-svelte
DEMO
EXAMPLES AND DEVELOPING
To run the examples from /src/routes
:
git clone https://github.com/joaquimnetocel/pagination-svelte.git
cd pagination-svelte
npm install
npm run dev
COMPONENT STRUCTURE
- PaginationItems: A svelte component for pagination.
PROPS
PROP | DESCRIPTION | TYPE | REQUIRED | DEFAULT |
---|
propActivePage (bindable) | ACTIVE PAGE. | number | NO | 1 |
propNumberOfRows | TOTAL NUMBER OF ROWS. | number | NO | - |
propNumberOfRowsPerPage | TOTAL NUMBER OF ROWS PER PAGE. | number | NO | - |
propNumberOfPages | TOTAL NUMBER OF PAGES. IF propNumberOfRows AND propNumberOfRowsPerPage ARE INFORMED, THIS PROPERTY WILL NOT BE USED. | number | NO | 1 |
propTag | HTML TAG OF THE PAGINATION ITEM. | 'span' OR 'div' OR 'li' OR 'button' OR 'a' | YES | - |
propInnerTag | HTML TAG INSIDE THE PAGINATION ITEM. | 'span' OR 'div' OR 'li' OR 'button' OR 'a' | NO | span |
propPrevious | PREVIOUS BUTTON TEXT. | string | NO | - |
propNext | NEXT BUTTON TEXT. | string | NO | - |
propShortMode | IF IN SHORT MODE, PAGINATION WILL SHOW ONLY FORWARD AND BACKWARD BUTTONS. | boolean | NO | false |
propShortModeLimit | IF THE NUMBER OF PAGES IS GREATER THAN propShortModeLimit THE SHORT MODE IS ACTIVATED. | number | NO | 1000 |
style | CSS STYLES FOR PAGINATION ITEMS. | string | NO | - |
class | CSS CLASSES FOR PAGINATION ITEMS. | string | NO | - |
propDisabledStyle | CSS STYLES FOR DISABLED PAGINATION ITEMS. | string | NO | - |
propDisabledClass | CSS CLASSES FOR DISABLED PAGINATION ITEMS. | string | NO | - |
propActiveStyle | CSS STYLES FOR ACTIVE PAGINATION ITEMS. | string | NO | - |
propActiveClass | CSS CLASSES FOR ACTIVE PAGINATION ITEMS. | string | NO | - |
propInnerClass | CSS CLASSES FOR THE TAG INSIDE PAGINATION ITEMS. | string | NO | - |
propInnerStyle | CSS CLASSES FOR THE TAG INSIDE PAGINATION ITEMS. | string | NO | - |