Last active
May 22, 2022 12:04
-
-
Save dsbilling/be88fb56a27e647d9f168d9cca8a482d to your computer and use it in GitHub Desktop.
Laravel Pagination: Dark/Light Tailwind
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| @if ($paginator->hasPages()) | |
| @php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1) | |
| <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between"> | |
| <div class="flex justify-between flex-1 sm:hidden"> | |
| <span> | |
| @if ($paginator->onFirstPage()) | |
| <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-700 cursor-none leading-5 rounded-md"> | |
| {!! __('pagination.previous') !!} | |
| </span> | |
| @else | |
| <button wire:click="previousPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white dark:bg-gray-800 border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-700 transition ease-in-out duration-150"> | |
| {!! __('pagination.previous') !!} | |
| </button> | |
| @endif | |
| </span> | |
| <span> | |
| @if ($paginator->hasMorePages()) | |
| <button wire:click="nextPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-700 transition ease-in-out duration-150"> | |
| {!! __('pagination.next') !!} | |
| </button> | |
| @else | |
| <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white dark:bg-gray-900 border border-gray-300 select-none leading-5 rounded-md"> | |
| {!! __('pagination.next') !!} | |
| </span> | |
| @endif | |
| </span> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700 dark:text-gray-300 leading-5"> | |
| <span>{!! __('Showing') !!}</span> | |
| <span class="font-medium">{{ $paginator->firstItem() }}</span> | |
| <span>{!! __('to') !!}</span> | |
| <span class="font-medium">{{ $paginator->lastItem() }}</span> | |
| <span>{!! __('of') !!}</span> | |
| <span class="font-medium">{{ $paginator->total() }}</span> | |
| <span>{!! __('results') !!}</span> | |
| </p> | |
| </div> | |
| <div> | |
| <span class="relative z-0 inline-flex rounded-md shadow-sm"> | |
| <span> | |
| {{-- Previous Page Link --}} | |
| @if ($paginator->onFirstPage()) | |
| <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}"> | |
| <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 dark:text-gray-700 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 cursor-default rounded-l-md leading-5" aria-hidden="true"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| </span> | |
| @else | |
| <button wire:click="previousPage('{{ $paginator->getPageName() }}')" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| @endif | |
| </span> | |
| {{-- Pagination Elements --}} | |
| @foreach ($elements as $element) | |
| {{-- "Three Dots" Separator --}} | |
| @if (is_string($element)) | |
| <span aria-disabled="true"> | |
| <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 select-none leading-5">{{ $element }}</span> | |
| </span> | |
| @endif | |
| {{-- Array Of Links --}} | |
| @if (is_array($element)) | |
| @foreach ($element as $page => $url) | |
| <span wire:key="paginator-{{ $paginator->getPageName() }}-{{ $this->numberOfPaginatorsRendered[$paginator->getPageName()] }}-page{{ $page }}"> | |
| @if ($page == $paginator->currentPage()) | |
| <span aria-current="page"> | |
| <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-700 select-none leading-5">{{ $page }}</span> | |
| </span> | |
| @else | |
| <button wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 dark:text-gray-500 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}"> | |
| {{ $page }} | |
| </button> | |
| @endif | |
| </span> | |
| @endforeach | |
| @endif | |
| @endforeach | |
| <span> | |
| {{-- Next Page Link --}} | |
| @if ($paginator->hasMorePages()) | |
| <button wire:click="nextPage('{{ $paginator->getPageName() }}')" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| @else | |
| <span aria-disabled="true" aria-label="{{ __('pagination.next') }}"> | |
| <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 cursor-default rounded-r-md leading-5" aria-hidden="true"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| </span> | |
| @endif | |
| </span> | |
| </span> | |
| </div> | |
| </div> | |
| </nav> | |
| @endif | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @if ($paginator->hasPages()) | |
| <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between"> | |
| <div class="flex justify-between flex-1 sm:hidden"> | |
| @if ($paginator->onFirstPage()) | |
| <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-700 select-none leading-5 rounded-md"> | |
| {!! __('pagination.previous') !!} | |
| </span> | |
| @else | |
| <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white dark:bg-gray-800 border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-700 transition ease-in-out duration-150"> | |
| {!! __('pagination.previous') !!} | |
| </a> | |
| @endif | |
| @if ($paginator->hasMorePages()) | |
| <a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-700 transition ease-in-out duration-150"> | |
| {!! __('pagination.next') !!} | |
| </a> | |
| @else | |
| <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white dark:bg-gray-900 border border-gray-300 select-none leading-5 rounded-md"> | |
| {!! __('pagination.next') !!} | |
| </span> | |
| @endif | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700 dark:text-gray-300 leading-5"> | |
| {!! __('Showing') !!} | |
| <span class="font-medium">{{ $paginator->firstItem() }}</span> | |
| {!! __('to') !!} | |
| <span class="font-medium">{{ $paginator->lastItem() }}</span> | |
| {!! __('of') !!} | |
| <span class="font-medium">{{ $paginator->total() }}</span> | |
| {!! __('results') !!} | |
| </p> | |
| </div> | |
| <div> | |
| <span class="relative z-0 inline-flex shadow-sm rounded-md"> | |
| {{-- Previous Page Link --}} | |
| @if ($paginator->onFirstPage()) | |
| <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}"> | |
| <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 dark:text-gray-700 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 cursor-default rounded-l-md leading-5" aria-hidden="true"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| </span> | |
| @else | |
| <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </a> | |
| @endif | |
| {{-- Pagination Elements --}} | |
| @foreach ($elements as $element) | |
| {{-- "Three Dots" Separator --}} | |
| @if (is_string($element)) | |
| <span aria-disabled="true"> | |
| <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 select-none leading-5">{{ $element }}</span> | |
| </span> | |
| @endif | |
| {{-- Array Of Links --}} | |
| @if (is_array($element)) | |
| @foreach ($element as $page => $url) | |
| @if ($page == $paginator->currentPage()) | |
| <span aria-current="page"> | |
| <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-700 cursor-default leading-5">{{ $page }}</span> | |
| </span> | |
| @else | |
| <a href="{{ $url }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 dark:text-gray-500 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}"> | |
| {{ $page }} | |
| </a> | |
| @endif | |
| @endforeach | |
| @endif | |
| @endforeach | |
| {{-- Next Page Link --}} | |
| @if ($paginator->hasMorePages()) | |
| <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 dark:ring-gray-500 focus:border-blue-300 dark:focus:border-gray-700 active:bg-gray-100 dark:active:bg-gray-900 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </a> | |
| @else | |
| <span aria-disabled="true" aria-label="{{ __('pagination.next') }}"> | |
| <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 cursor-default rounded-r-md leading-5" aria-hidden="true"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| </span> | |
| @endif | |
| </span> | |
| </div> | |
| </div> | |
| </nav> | |
| @endif |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment