Pagination-svelte NPM

pagination-svelte

NPM License

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. The component's formatting was inspired by bootstrap. Really just an inspiration, since the component doesn't rely on bootstrap to work.

PAGINATION

DEMO

REPL: BASIC EXAMPLE

INSTALLATION

npm install pagination-svelte

HOW TO USE IT

<script>
    import Pagination from 'pagination-svelte';
    let page = 1;
</script>

<p>THE SELECTED PAGE IS: {page}</p>

<Pagination
    propNumberOfPages={7}
    bind:propActivePage={page}
    on:eventChange={(parEvent) => console.log(parEvent.detail.numberActivePage)}
/>

PROPS

BEHAVIOR PROPS:

PROP	TYPE	DEFAULT	DESCRIPTION
`propActivePage`	`number`	`1`	The selected/active page (bind to this prop)
`propNumberOfPages`	`number`	`5`	The total number of pages. If `propNumberOfRows` is different from `undefined`, this property will not be used.
`propPrevious`	`string`	`PREVIOUS`	Text of the previous button.
`propNext`	`string`	`NEXT`	Text of the next button.
`propSize`	`normal` OR `small` OR `large`	`normal`	Size of the component.

FORMATING PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
`cssActiveBackgroundColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`#0d6efd` (blue)	Background color of the active page.
`cssBackgroundColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`#fff` (white)	Background color of the inactive pages.
`cssHoverBackgroundColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`#f8f9fa`	Background color (when hover).
`cssActiveFontColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`white`	Font color of the active page.
`cssFontColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`#f8f9fa`	Font color of the inactive pages.
`cssHoverFontColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`#0a58ca`	Font color of the inactive pages (when hover).
`cssActiveBorderColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`#0d6efd` (blue)	Border color of the active page.
`cssDisabledColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`rgba(33, 37, 41, 0.75)`	Font color of disabled buttons.
`cssBorderColor`	`string` (RGB, RGBA, HEX OR COLOR NAME)	`#dee2e6`	Border color.
`cssBorderWidth`	`string` (rem OR px)	`1px`	Border width.