Studio
2

Pagination

Installation

pnpm dlx @mielui/svelte add pagination

Usage

Bindpage to the current page, starting at 1. Settotal to the number of pages, not the number of records. Update your displayed records or fetch the next page when the value changes.

Page numbers and totals are rounded down and kept within valid bounds. Non-finite values fall back to 1.siblings sets the number of neighboring pages shown on each side, from 0 to 100.

import { Pagination } from '$lib/mielui/components/pagination';

let page = $state(1);

<Pagination bind:page total={20} />

Examples

Sibling count

API reference

Pagination

Navigates paginated content.

Prop Type Default
page Bindable number | undefined 1
total Required number —
siblings number | undefined 1
onPageChange ((page: number) => void) | undefined —
class string | undefined —
children Snippet<[]> | undefined —