pagination-svelte

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	-