Skip to content
omaris · Learn
Navigation

Pagination

Pagination.

Full reference: every prop and when to use it →

Walkthrough

1. Basic

siblings and boundaries decide how many numbers survive the ellipsis — the footer of a list that comes from a server a page at a time.

<script lang="ts">	import { Pagination } from 'omaris';​	let page = $state(4);</script>​<div class="flex w-full flex-col items-center gap-6">	<Pagination bind:page count={12} />	<Pagination bind:page count={12} siblings={2} size="sm" /></div>

2. Compact and summary

compact drops to prev/next with a count, which is what a phone wants. Give it total and perPage and it writes the summary itself.

<script lang="ts">	import { Pagination } from 'omaris';​	let page = $state(2);</script>​<div class="flex w-full flex-col items-center gap-6">	<Pagination bind:page count={9} total={168} perPage={20} />	<Pagination bind:page count={9} compact /></div>