Pagination
Flexible component to indicate a series of related content exists across multiple pages
- basic usage
<div class="flex flex-col items-start gap-4">
<Pagination total={50} />
<Pagination total={100}
pageSize={15}
bind:current={currentPage} />
<Pagination total={40}
defaultStyle="warning"
highlightedStyle="success"
previousLabel="Previous"
nextLabel="Next" />
</div>- sizings
<div class="flex flex-col items-start gap-4">
<Pagination total={30} size="small" />
<Pagination total={30} size="default" />
<Pagination total={30} size="large" />
</div>- simple
<Pagination simple total={50} />- long pagination
<Pagination total={500}
rangeBetween={2}
current={8} />- bullets
<Pagination bullets total={50} />- page label
<script>
function romanize(num) { ... }
</script>
<div class="flex flex-col items-start gap-4">
<Pagination total={100}>
{#snippet pageLabel(idx)}
{romanize(idx)}
{/snippet}
</Pagination>
<Pagination total={100}>
{#snippet pageLabel(idx)}
<em>{idx}</em>
{/snippet}
</Pagination>
</div>- jumper
<Pagination total={500}
rangeBetween={2}
jumper />