src/Controller/SwupController.php
#[Route('/swup/{page<\d+>}', name: 'app_swup')]
public function swup(PackageRepository $packageRepository, int $page = 1): Response
{
// pagination links are just an example: swup works with any "a" tags!
$pagerfanta = Pagerfanta::createForCurrentPageWithMaxPerPage(
new ArrayAdapter($packageRepository->findAll()),
$page,
4
);
return $this->render('ux_packages/swup.html.twig', [
'pager' => $pagerfanta,
]);
}
templates/swup.html.twig
{# initialize the swup controller, then render normal links! #}
<div
{{ stimulus_controller('symfony/ux-swup/swup') }}
id="swup"
>
{% for package in pager %}
<a href="{{ path(package.route) }}" class="col-12">
<img src="{{ asset('build/images/'~package.imageFilename) }}">
<h4>{{ package.humanName }}</h4>
</a>
{% endfor %}
{{ pagerfanta(pager, 'twitter_bootstrap5') }}
</div>
UX Swup
Ajax-powered page navigation
URL in address bar changes
Customizable transitions
Install It
$ composer require ux symfony/ux-swup
$ npm install --force
$ npm run watch