Pagination
Navigation for splitting content across pages.
<script lang="ts">
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationPrevButton,
PaginationNextButton,
PaginationEllipsis
} from "$lib/components/ui/pagination";
</script>
<Pagination count={100} perPage={10} page={1}>
{#snippet children({ pages, currentPage })}
<PaginationContent>
<PaginationItem>
<PaginationPrevButton />
</PaginationItem>
{#each pages as page (page.key)}
{#if page.type === "ellipsis"}
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
{:else}
<PaginationItem>
<PaginationLink {page} isActive={currentPage === page.value} />
</PaginationItem>
{/if}
{/each}
<PaginationItem>
<PaginationNextButton />
</PaginationItem>
</PaginationContent>
{/snippet}
</Pagination>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the pagination source from the registry into $lib/components/ui/pagination.
Usage
<script lang="ts">
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationPrevButton,
PaginationNextButton,
PaginationEllipsis
} from '$lib/components/ui/pagination';
</script>
<Pagination count={100} perPage={10} page={1}>
{#snippet children({ pages, currentPage })}
<PaginationContent>
<PaginationItem><PaginationPrevButton /></PaginationItem>
{#each pages as page (page.key)}
{#if page.type === 'ellipsis'}
<PaginationItem><PaginationEllipsis /></PaginationItem>
{:else}
<PaginationItem>
<PaginationLink {page} isActive={currentPage === page.value} />
</PaginationItem>
{/if}
{/each}
<PaginationItem><PaginationNextButton /></PaginationItem>
</PaginationContent>
{/snippet}
</Pagination>