Simple pagination component built with svelte and tailwindcss
Installation
$npm i @fouita/pagination -D
Simple usage
<script>
import Pagination from '@fouita/pagination'
let current =1
let num_items=30
let per_page=3
</script>
<Pagination bind:current={current} {num_items} {per_page} />
Style rounded
<Pagination rounded bind:current={current} {num_items} {per_page} />
Change Size to small
<Pagination small rounded bind:current={current} {num_items} {per_page} />
Change Color
You can use a color from tailwindcss list (gray, red, blue, indigo, pink, purple, teal, orange, yellow)
<Pagination small rounded color="pink" bind:current={current} {num_items} {per_page} />
Per page selection
You can add
<script>
import Pagination from '@fouita/pagination'
let current =1
let num_items=30
let per_page=3
</script>
<div class="flex justify-between items-center">
<div class="flex items-center">
Per page:
<select class="border px-2 rounded ml-2" bind:value={per_page}>
<option>3</option>
<option>5</option>
<option>10</option>
</select>
</div>
<Pagination small bind:current={current} {num_items} per_page={per_page} />
</div>
Navigate Action
if you like to perform some actions or API requests when navigating through pages, you can do so by calling on:navigate event.
<script>
import Pagination from '@fouita/pagination'
let current =1
let num_items=30
let per_page=3
// let list_fetch = ... your init data
async function changePage(evt){
current = evt.detail
// list_fetched = ... FETCH DATA HERE
}
</script>
<Pagination small {current} {num_items} per_page={per_page} on:navigate={changePage} />
Source code
You can find the source code at fouita pagination
Top comments (0)