\n \n\n \n\n\n## About The Project\nA simple Svelte component for handling pagination, nothing more. Corrections and suggestions are welcome.\n\n![paginator-screenshot-1]\n\n\n### Built With\n[![Svelte][svelte-shield]][Svelte-url]\n\n[![SvelteKit][svelteKit-shield]][SvelteKit-url]\n\nThe demo app utilizes Pico.css as its styling framework.\n\nThe SVG icons used in this project are retrieved from Iconify, specifically the following icons:\n- material-symbols:dark-mode-outline\n- material-symbols:light-mode-outline\n- material-symbols:chevron-left\n- material-symbols:chevron-right\n- material-symbols:first-page\n- material-symbols:last-page\n- material-symbols:more-horiz\n- mdi:github\n\n\n\n## Getting Started\n1. Install the package.\n ```sh\n npm i @dflare/svelte-page-navigation\n ```\n\n2. Import the `Paginator` component.\n ```js\n import {Paginator} from \"@dflare/svelte-page-navigation\";\n ```\n\n3. Add the `Paginator` component to the markup and handle the `chenge` event.\n ```html\n \n ```\n\n### Paginator component\nThe `Paginator` component is the main component that implements pagination and provides the following properties:\n\n* **`pages`**: a number that represents the total number of items to be managed. Its default value is `10`.\n* **`currentPage`**: a number indicating the current page (Zero-based numbering). Its default value is `0`.\n* **`initChunkSize`**: a number indicating the size of page grouping. If this number is smaller than the total number of pages and the available space is sufficient, then the page navigation buttons will be displayed in groups of size equal to `initChunkSize`. Its default value is equal to the total number of pages set with the `pages` property.\n* **`initShowFirstButton`**: a boolean that, when set to `true`, enables displaying a button to directly navigate to the first page. The default value is `true`.\n* **`initShowLastButton`**: a boolean that, when set to `true`, enables displaying a button to directly navigate to the last page. The default value is `true`.\n* **`showCurrentPageLabel`**: a boolean that, when set to `true`, enables displaying a label with the current page number. The default value is `false`.\n* **`customPaginatorButton`**: it allows to specify a custom component that represents the button used by `Paginator` component.\n\nIf there is enough available space, the `Paginator` component will display all the buttons for the pages (based on the values set for the `pages` and `initChunkSize` properties). Otherwise, it will automatically reduce the number of visible buttons.\n\n\n## Usage\n\n### Basic example\n\n```js\n\n\n
\n\n### Custom button example\nTo create a completely custom button, it is sufficient to create a new component that has the structure and properties of the PaginatorButton default component. The custom component should be passed to the `Paginator` component, which will use it instead of the default one.\n\n**App.svelte**\n\n```js\n\n\n
\n\n\n## License\nDistributed under the MIT License. See [LICENSE.md][license-url] for more information.\n\n\n\n[license-shield]: https://img.shields.io/github/license/francescodessi/svelte-page-navigation?&style=for-the-badge\n[license-url]: https://github.com/francescodessi/svelte-page-navigation/blob/main/LICENSE.md\n[npm-version-shield]: https://img.shields.io/npm/v/@dflare/svelte-page-navigation?logo=npm&style=for-the-badge\n[npm-url]: https://www.npmjs.com/package/@dflare/svelte-page-navigation\n[github-release-shield]: https://img.shields.io/github/v/release/francescodessi/svelte-page-navigation?logo=github&style=for-the-badge\n[github-release-url]: https://github.com/francescodessi/svelte-page-navigation/releases/latest\n[svelte-shield]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte\n[Svelte-url]: https://svelte.dev/\n[svelteKit-shield]: https://img.shields.io/badge/SvelteKit-4A4A55?style=for-the-badge&logo=svelte\n[SvelteKit-url]: https://kit.svelte.dev/\n[paginator-screenshot-1]: https://github.com/francescodessi/svelte-page-navigation/raw/main/static/paginator-screenshot-1.png\n[paginator-screenshot-2]: https://github.com/francescodessi/svelte-page-navigation/raw/main/static/paginator-screenshot-2.png\n[paginator-screenshot-3]: https://github.com/francescodessi/svelte-page-navigation/raw/main/static/paginator-screenshot-3.png\n","readmeFilename":"README.md"}