https://github.com/fouita/svelte-tw-pagination

Svelte + tailwindcss pagination component
https://github.com/fouita/svelte-tw-pagination

fouita svelte tailwindcss

Last synced: 3 months ago
JSON representation

Svelte + tailwindcss pagination component

• Host: GitHub
• URL: https://github.com/fouita/svelte-tw-pagination
• Owner: fouita
• Created: 2020-09-11T12:11:32.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-04-07T09:16:24.000Z (almost 4 years ago)
• Last Synced: 2024-09-29T10:44:36.889Z (3 months ago)
• Topics: fouita, svelte, tailwindcss
• Language: Svelte
• Homepage:
• Size: 5.86 KB
• Stars: 20
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Responsive Svelte + Tailwind Pagination component

Simple pagination component built with svelte and tailwindcss 

## Installation

```bash

    $npm i @fouita/pagination -D

```

## Simple usage

![fouita pagination](https://cdn.fouita.com/assets/pics/template/pagination/pagination-simple.png)

```html

    import Pagination from '@fouita/pagination'

    let current =1

    let num_items=30

    let per_page=3

```

## Style rounded

![fouita pagination rounded](https://cdn.fouita.com/assets/pics/template/pagination/pagination-rounded.png)

```html

```

## Change Size to small

![fouita pagination small](https://cdn.fouita.com/assets/pics/template/pagination/pagination-small.png)

```html

```

## Change Color

You can use a color from tailwindcss list `(gray, red, blue, indigo, pink, purple, teal, orange, yellow)`

![fouita pagination small](https://cdn.fouita.com/assets/pics/template/pagination/pagination-color.png)

```html

```

## Per page selection

You can add

![fouita pagination selection](https://cdn.fouita.com/assets/pics/template/pagination/pagination_per_page.png)

```html

	import Pagination from '@fouita/pagination'

	let current =1

	let num_items=30

	let per_page=3	

	



	


		Per page:

		

			3

			5

			10

		

	

	

			  

```


## 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.

```html

	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

	}

```

## About

[Fouita : UI framework for svelte + tailwind components](https://fouita.com)