124 lines
3.9 KiB
PHP
124 lines
3.9 KiB
PHP
@if ($paginator->hasPages())
|
|
<ul class="pagination justify-content-center m-0">
|
|
{{-- Prev --}}
|
|
@if ($paginator->onFirstPage())
|
|
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
|
|
<span class="page-link" aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
|
|
</li>
|
|
@else
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev"
|
|
aria-label="@lang('pagination.previous')">
|
|
<i class="bi bi-chevron-left"></i>
|
|
</a>
|
|
</li>
|
|
@endif
|
|
|
|
{{-- Numbers --}}
|
|
@foreach ($elements as $element)
|
|
@if (is_string($element))
|
|
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span>
|
|
</li>
|
|
@endif
|
|
|
|
@if (is_array($element))
|
|
@foreach ($element as $page => $url)
|
|
@if ($page == $paginator->currentPage())
|
|
<li class="page-item active" aria-current="page"><span
|
|
class="page-link">{{ $page }}</span></li>
|
|
@else
|
|
<li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a>
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
@endif
|
|
@endforeach
|
|
|
|
{{-- Next --}}
|
|
@if ($paginator->hasMorePages())
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next"
|
|
aria-label="@lang('pagination.next')">
|
|
<i class="bi bi-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
@else
|
|
<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
|
|
<span class="page-link" aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
|
|
</li>
|
|
@endif
|
|
</ul>
|
|
@endif
|
|
|
|
@push('style')
|
|
<style>
|
|
/* --- simple minimal pagination --- */
|
|
:root {
|
|
--pg-size: 34px;
|
|
/* tombol */
|
|
--pg-radius: 999px;
|
|
/* pill */
|
|
--pg-gap: 6px;
|
|
/* jarak antar tombol */
|
|
}
|
|
|
|
/* tata letak ringkas */
|
|
.pagination {
|
|
gap: var(--pg-gap);
|
|
}
|
|
|
|
/* tombol dasar */
|
|
.pagination .page-link {
|
|
min-width: var(--pg-size);
|
|
height: var(--pg-size);
|
|
padding: 0 .6rem;
|
|
/* biar angka 2 digit muat */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--pg-radius);
|
|
border: 1px solid #dee2e6;
|
|
background: #fff;
|
|
color: var(--primary-color);
|
|
line-height: 1;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ikon chevron ukuran normal */
|
|
.pagination .page-link i.bi {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* hover sederhana (tanpa animasi/transform) */
|
|
.pagination .page-link:hover {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: #fff;
|
|
}
|
|
|
|
/* state aktif & disabled */
|
|
.pagination .page-item.active .page-link {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: #fff;
|
|
}
|
|
|
|
.pagination .page-item.disabled .page-link {
|
|
opacity: .5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* responsif kecil */
|
|
@media (max-width: 576px) {
|
|
:root {
|
|
--pg-size: 30px;
|
|
--pg-gap: 4px;
|
|
}
|
|
|
|
.pagination .page-link {
|
|
padding: 0 .5rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|