edge-components

Pagination: Light 

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

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

    </div>

    <div class="join">
        <a role="button" class="btn btn-disabled join-item btn-md">
            «
        </a>

        <button class="btn join-item btn-md">Page 1</button>
        <a role="button" class="btn btn-disabled join-item btn-md">
            »
        </a>
    </div>

    <div class="join">
        <a role="button" class="btn btn-disabled join-item btn-xs">
            «
        </a>

        <button class="btn join-item btn-xs">Page 1</button>
        <a role="button" class="btn btn-disabled join-item btn-xs">
            »
        </a>
    </div>

    <div class="join">
        <a role="button" class="btn btn-disabled join-item btn-sm">
            «
        </a>

        <button class="btn join-item btn-sm">Page 1</button>
        <a role="button" class="btn btn-disabled join-item btn-sm">
            »
        </a>
    </div>

    <div class="join">
        <a role="button" class="btn btn-disabled join-item btn-md">
            «
        </a>

        <button class="btn join-item btn-md">Page 1</button>
        <a role="button" class="btn btn-disabled join-item btn-md">
            »
        </a>
    </div>

    <div class="join">
        <a role="button" class="btn btn-disabled join-item btn-lg">
            «
        </a>

        <button class="btn join-item btn-lg">Page 1</button>
        <a role="button" class="btn btn-disabled join-item btn-lg">
            »
        </a>
    </div>

</div>
 
<div class="grid grid-cols-1 gap-2">
  @!jrmc.pagination.light({ object: fakeUsers({ currentPage: 4, total: 10 }) })
  @!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }) })
  @!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }), size: 'xs' })
  @!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }), size: 'sm' })
  @!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }), size: 'md' })
  @!jrmc.pagination.light({ object: fakeUsers({ currentPage: 1, total: 1 }), 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