応答Svelte＋Tailwind Paginationコンポーネント

7385 ワード
tailwindcss pagination svelte fouita テキストリンク
SvelTeおよびTailWindCSSで構築した簡単なページ化コンポーネント

インストール


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

色を変える


あなたはToodWinCssリスト(gray, red, blue, indigo, pink, purple, teal, orange, yellow)から色を使用することができます

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

移動行動


ページをナビゲートするときに何らかのアクションやAPIリクエストを実行するのが好きなら、on:navigateのイベントを呼び出すことで、そうすることができます.
<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} />

ソースコード


ソースコードはfouita pagination
【AWS】プライベートサブネット3分クッキング（ハンズオン）
私はどのようにフロントエンドのユーザーのIPを取得して、そしてIPによって地理的な位置付けを取得します