설치

    $npm i @fouita/pagination -D

간단한 사용법

<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} />

둥근 스타일

<Pagination rounded bind:current={current} {num_items} {per_page} />

크기를 작게 변경

<Pagination small rounded bind:current={current} {num_items} {per_page} />

색상 변경

<Pagination small rounded color="pink" bind:current={current} {num_items} {per_page} />

페이지당 선택

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

액션 탐색

<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} />

소스 코드