edge-components

Pagination: Size 

<div class="grid grid-cols-1 gap-2">
    <div class="join">
        <a role="button" href="#1" class="btn join-item btn-xs">
            1
        </a>

        <a role="button" href="#2" class="btn join-item btn-xs">
            2
        </a>

        <a role="button" href="#3" class="btn join-item btn-xs">
            3
        </a>

        <a role="button" href="#4" class="btn join-item btn-active btn-xs">
            4
        </a>

        <a role="button" href="#5" class="btn join-item btn-xs">
            5
        </a>

        <a role="button" href="#6" class="btn join-item btn-xs">
            6
        </a>

        <a role="button" href="#7" class="btn join-item btn-xs">
            7
        </a>

        <a role="button" href="#8" class="btn join-item btn-xs">
            8
        </a>

        <a role="button" href="#9" class="btn join-item btn-xs">
            9
        </a>

        <a role="button" href="#10" class="btn join-item btn-xs">
            10
        </a>
    </div>
    <div class="join">
        <a role="button" href="#1" class="btn join-item btn-sm">
            1
        </a>

        <a role="button" href="#2" class="btn join-item btn-sm">
            2
        </a>

        <a role="button" href="#3" class="btn join-item btn-sm">
            3
        </a>

        <a role="button" href="#4" class="btn join-item btn-active btn-sm">
            4
        </a>

        <a role="button" href="#5" class="btn join-item btn-sm">
            5
        </a>

        <a role="button" href="#6" class="btn join-item btn-sm">
            6
        </a>

        <a role="button" href="#7" class="btn join-item btn-sm">
            7
        </a>

        <a role="button" href="#8" class="btn join-item btn-sm">
            8
        </a>

        <a role="button" href="#9" class="btn join-item btn-sm">
            9
        </a>

        <a role="button" href="#10" class="btn join-item btn-sm">
            10
        </a>
    </div>
    <div class="join">
        <a role="button" href="#1" class="btn join-item btn-md">
            1
        </a>

        <a role="button" href="#2" class="btn join-item btn-md">
            2
        </a>

        <a role="button" href="#3" class="btn join-item btn-md">
            3
        </a>

        <a role="button" href="#4" class="btn join-item btn-active btn-md">
            4
        </a>

        <a role="button" href="#5" class="btn join-item btn-md">
            5
        </a>

        <a role="button" href="#6" class="btn join-item btn-md">
            6
        </a>

        <a role="button" href="#7" class="btn join-item btn-md">
            7
        </a>

        <a role="button" href="#8" class="btn join-item btn-md">
            8
        </a>

        <a role="button" href="#9" class="btn join-item btn-md">
            9
        </a>

        <a role="button" href="#10" class="btn join-item btn-md">
            10
        </a>
    </div>
    <div class="join">
        <a role="button" href="#1" class="btn join-item btn-lg">
            1
        </a>

        <a role="button" href="#2" class="btn join-item btn-lg">
            2
        </a>

        <a role="button" href="#3" class="btn join-item btn-lg">
            3
        </a>

        <a role="button" href="#4" class="btn join-item btn-active btn-lg">
            4
        </a>

        <a role="button" href="#5" class="btn join-item btn-lg">
            5
        </a>

        <a role="button" href="#6" class="btn join-item btn-lg">
            6
        </a>

        <a role="button" href="#7" class="btn join-item btn-lg">
            7
        </a>

        <a role="button" href="#8" class="btn join-item btn-lg">
            8
        </a>

        <a role="button" href="#9" class="btn join-item btn-lg">
            9
        </a>

        <a role="button" href="#10" class="btn join-item btn-lg">
            10
        </a>
    </div>
</div>
 
{{--  fake object users  --}}
@set('users', fakeUsers({ currentPage: 4, total: 10 }))

<div class="grid grid-cols-1 gap-2">
  @!jrmc.pagination({ object: users, size: 'xs' })
  @!jrmc.pagination({ object: users, size: 'sm' })
  @!jrmc.pagination({ object: users, size: 'md' })
  @!jrmc.pagination({ object: users, size: 'lg' })
</div>

Pagination

Doc : daisyui pagination

Pagination is a group of buttons that allow the user to navigate between a set of related content.

⚠️ This component is adapted for adonisJS and Lucid

Adonis pagination

Class name Type
btn-group Component Groups buttons together