Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
58 lines
3.1 KiB
PHP
58 lines
3.1 KiB
PHP
{{-- Laravel's paginator (`$items->links()` outside Livewire), drawn in M3 as Livewire's is
|
||
(resources/views/pagination/livewire/tailwind.blade.php): links instead of actions, the current
|
||
page in secondary-container, "Page 2 of 7" on a phone. The package puts this in front of
|
||
`pagination::tailwind` (config `livewire-material.pagination`). --}}
|
||
|
||
@php
|
||
$step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums';
|
||
$live = $step.' state-layer focus-ring text-on-surface';
|
||
$dead = $step.' text-on-surface/38';
|
||
@endphp
|
||
|
||
@if ($paginator->hasPages())
|
||
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" data-pagination class="flex items-center justify-between gap-4">
|
||
<p class="type-body-sm text-on-surface-variant">
|
||
<span class="sm:hidden">{{ __('Page :page of :pages', ['page' => $paginator->currentPage(), 'pages' => $paginator->lastPage()]) }}</span>
|
||
<span class="max-sm:hidden">{{ __(':first–:last of :total', ['first' => $paginator->firstItem(), 'last' => $paginator->lastItem(), 'total' => $paginator->total()]) }}</span>
|
||
</p>
|
||
|
||
<div class="flex items-center gap-1">
|
||
@if ($paginator->onFirstPage())
|
||
<span class="{{ $dead }}" aria-disabled="true" aria-label="{{ __('Previous') }}">
|
||
<x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
|
||
</span>
|
||
@else
|
||
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="{{ $live }}" aria-label="{{ __('Previous') }}">
|
||
<x-livewire-material::icon name="chevron_left" class="size-6 rtl:-scale-x-100" />
|
||
</a>
|
||
@endif
|
||
|
||
@foreach ($elements as $element)
|
||
@if (is_string($element))
|
||
<span class="{{ $dead }} max-sm:hidden" aria-disabled="true">{{ $element }}</span>
|
||
@endif
|
||
|
||
@if (is_array($element))
|
||
@foreach ($element as $page => $url)
|
||
@if ($page == $paginator->currentPage())
|
||
<span aria-current="page" class="{{ $step }} bg-secondary-container text-on-secondary-container max-sm:hidden">{{ $page }}</span>
|
||
@else
|
||
<a href="{{ $url }}" class="{{ $live }} max-sm:hidden" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
|
||
@endif
|
||
@endforeach
|
||
@endif
|
||
@endforeach
|
||
|
||
@if ($paginator->hasMorePages())
|
||
<a href="{{ $paginator->nextPageUrl() }}" rel="next" class="{{ $live }}" aria-label="{{ __('Next') }}">
|
||
<x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
|
||
</a>
|
||
@else
|
||
<span class="{{ $dead }}" aria-disabled="true" aria-label="{{ __('Next') }}">
|
||
<x-livewire-material::icon name="chevron_right" class="size-6 rtl:-scale-x-100" />
|
||
</span>
|
||
@endif
|
||
</div>
|
||
</nav>
|
||
@endif
|