Pagination Svelte
pagination-svelte is a light weight svelte component that enables the user to select a specific page from a range of pages.
pagination-svelte
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.
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 | - |
