Pagination | tcpsystems/ui

Examples

Middle

Middle.svelte

<script lang="ts">
	import Pagination from '@tcpsystems/ui/foundation/Pagination';
</script>

<Pagination page={4} pages={12} summary="Page 4 of 12 · 288 deployments" href={(p) => `/deployments/?page=${p}`} />

First

First.svelte

<script lang="ts">
	import Pagination from '@tcpsystems/ui/foundation/Pagination';
</script>

<Pagination page={1} pages={8} summary="Page 1 of 8 · 126 invoices" href={(p) => `/invoices/?page=${p}`} />

Last

Last.svelte

<script lang="ts">
	import Pagination from '@tcpsystems/ui/foundation/Pagination';
</script>

<Pagination page={8} pages={8} summary="Page 8 of 8 · 126 invoices" href={(p) => `/invoices/?page=${p}`} />

API

Import

import Pagination from '@tcpsystems/ui/foundation/Pagination';

Prop	Type	Default
`page`	`number`	none
`pages`	`number`	none
`summary?`	`string`	none
`href`	`(p: number) => string`	none

Hook	Kind
`.tcp-pagination`	Root class