svelte-page-navigation-example-2 • Playground • Svelte

App.svelte

CustomButton.svelte

import {Paginator} from '@dflare/svelte-page-navigation';

import CustomButton from './CustomButton.svelte';

let pages = 20;

let currentPage = 6;

let initChunkSize = 10;

function pageChangeHandler(event) {

currentPage = event.detail.page;

}

</script>

<div>

Current Page: {currentPage + 1}

</div>

<Paginator

customPaginatorButton={CustomButton}

pages={pages}

currentPage={currentPage}

initChunkSize={initChunkSize}

on:change={pageChangeHandler} />

<div>

Try resizing the width of the window

</div>

<style>

div {

text-align: center;

font-size: 2.5rem;

margin: 2rem auto;

}

</style>

loading Svelte compiler...

/* Select a component to see its compiled code */

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Select a component to see its compiled code */