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
Discussion (1)
Awesome! Tailwind css solves the reusability problem in Svelte on the css side.no css in js solution needed anymore.