Paginering
Gebruik de paginering component om te navigeren tussen meerder pagina's met (zoek)resultaten.
Pagination voor een list met links naar meerdere resultaten pagina’s.
Geef alle list items de class pagination__item. Plaats alle
pagination__items vóór de --previous en
--next items. Deze 2 links worden automatisch verborgen wanneer
ze niet van toepassing zijn.
Gebruik geen link op de pagina waar je bent, maar zet daar een span die aangeeft dat dat de huidige pagina is.
Zet daar de classpagination__item--active op, zodat alleen screenreaders het zien.
Een link naar de eerste of laatste resultaten pagina kan opgenomen worden met een classpagination__item--first en pagination__item--last.
De teksten ‘Volgende’ en ‘Vorige’ worden visueel verborgen op kleine schermen (wel zichtbaar voor screenreaders).
Op het moment dat de pagination meer dan 7 items bevat moet de classpagination__item--dots worden toegevoegd aan het eerste en laatste item. Voor mobiele apparaten maken we gebruik van de class
pagination__item--total. Met deze class zorg je ervoor dat je een totaal overzicht van alle pagina's kan tonen in de mobiele navigatie.
Paginering met meer dan 7 items
Paginering 6 items
Paginering tot 5 items
Paginering simple
Een simpele paginering die gebruikt kan worden bij bijvoorbeeld Google Search resultaten.
Benodigde stylesheets
/uno/components/pagination/pagination.css