<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>
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
Class name | Type | |
---|---|---|
btn-group | Component | Groups buttons together |