Skip to content

Instantly share code, notes, and snippets.

@kevineduardo
Forked from mazedlx/tailwindcss.blade.php
Created January 28, 2022 11:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevineduardo/892c10aa18ca7dd67fbec666c600b11c to your computer and use it in GitHub Desktop.
Save kevineduardo/892c10aa18ca7dd67fbec666c600b11c to your computer and use it in GitHub Desktop.
Tailwind CSS template for Laravel pagination
@if ($paginator->hasPages())
<div class="flex items-center">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<span class="rounded-l rounded-sm border border-brand-light px-3 py-2 cursor-not-allowed no-underline">&laquo;</span>
@else
<a
class="rounded-l rounded-sm border-t border-b border-l border-brand-light px-3 py-2 text-brand-dark hover:bg-brand-light no-underline"
href="{{ $paginator->previousPageUrl() }}"
rel="prev"
>
&laquo;
</a>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<span class="border-t border-b border-l border-brand-light px-3 py-2 cursor-not-allowed no-underline">{{ $element }}</span>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<span class="border-t border-b border-l border-brand-light px-3 py-2 bg-brand-light no-underline">{{ $page }}</span>
@else
<a class="border-t border-b border-l border-brand-light px-3 py-2 hover:bg-brand-light text-brand-dark no-underline" href="{{ $url }}">{{ $page }}</a>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<a class="rounded-r rounded-sm border border-brand-light px-3 py-2 hover:bg-brand-light text-brand-dark no-underline" href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a>
@else
<span class="rounded-r rounded-sm border border-brand-light px-3 py-2 hover:bg-brand-light text-brand-dark no-underline cursor-not-allowed">&raquo;</span>
@endif
</div>
@endif
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment