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

• REPL: BASIC EXAMPLE
• REPL: BOOTSTRAP EXAMPLE
• REPL: SHORT MODE EXAMPLE

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 | - |