<script>
import {Paginator} from '@dflare/svelte-page-navigation';
let pages = 20;
let currentPage = 6; // It can be omitted if you want to use the default value of 0
let initChunkSize = 10;
let initShowFirstButton = true; // It can be omitted if you want to use the default value of true
let initShowLastButton = true; // It can be omitted if you want to use the default value of true
let showCurrentPageLabel = true; // It can be omitted if you want to use the default value of false
function pageChangeHandler(event) {
currentPage = event.detail.page;
}
</script>
<div>
Current Page: {currentPage + 1}
</div>
<Paginator
pages={pages}
currentPage={currentPage}
initChunkSize={initChunkSize}
initShowFirstButton={initShowFirstButton}
initShowLastButton={initShowLastButton}
showCurrentPageLabel={showCurrentPageLabel}
on:change={pageChangeHandler} />
<div>
Try resizing the width of the window
</div>
<style>
div {
text-align: center;