Pagination

Le composant `pagination` permet d'afficher une pagination.

Il prend en paramètre un objet de type fr.kosmos.web.kore.attributes.Pagination.

L'objet Pagination est composé des éléments suivants :

• links : une liste d'objets PaginationLink
• firstLink : un objet PaginationFirstLink pour le premier élément
• previousLink : un objet PaginationPreviousLink pour l'élément précédent
• nextLink : un objet PaginationNextLink pour l'élément suivant
• lastLink : un objet PaginationLastLink pour le dernier élément

L'objet PaginationLink est composé des propriétés suivantes :

• pageNumber : le numéro de la page
• label : le libellé du lien
• url : l'url du lien
• current : le lien est-il l'item courant
• ariaLabel : le libellé du lien pour les lecteurs d'écran

Exemples

<kuik:pagination pagination="${pagination}" />

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ attribute name="pagination" description="Information de la pagination" required="true" type="fr.kosmos.web.kore.attributes.interfaces.Pagination" %>

<c:if test="${not empty pageScope.pagination.links}">

    <c:set value="pagination js-pagination" var="classes"/>

    <c:set var="attributes">
        <c:forEach items="${dynattrs}" var="a">
            <c:choose>
                <c:when test="${a.key == 'class'}">
                    <c:set value="${classes} ${a.value}" var="classes"/>
                </c:when>
                <c:otherwise>${a.key}="${a.value}" </c:otherwise>
            </c:choose>
        </c:forEach>
    </c:set>

    <nav class="${classes}" aria-label="pagination" ${attributes}>
        <ul class="pagination__list">
            <c:if test="${not empty pagination.firstLink}">
                <li>
                    <a href="<c:out value="${pagination.firstLink.url}"/>" class="pagination__link button button--tertiary button--accent button--md button--icon-only" <c:if test="${not empty pagination.firstLink.ariaLabel}">aria-label="${pagination.firstLink.ariaLabel}"</c:if>>
                        <kuik:icon title="${pagination.firstLink.label}" source="icon://ui/double-arrow-left" size="md"/>
                        <span class="visually-hidden"> <c:out value="${pagination.firstLink.label}"/></span>
                    </a>
                </li>
            </c:if>
            <c:if test="${not empty pagination.previousLink}">
                <li>
                    <a href="<c:out value="${pagination.previousLink.url}"/>" class="pagination__link button button--tertiary button--accent button--md button--icon-only" <c:if test="${not empty pagination.previousLink.ariaLabel}">aria-label="${pagination.previousLink.ariaLabel}"</c:if>>
                        <kuik:icon title="${pagination.previousLink.label}" source="icon://ui/chevron-left" size="md"/>
                        <span class="visually-hidden"> <c:out value="${pagination.previousLink.label}"/></span>
                    </a>
                </li>
            </c:if>
            <c:forEach var="link" items="${pagination.links}">
                    <c:choose>
                        <c:when test="${link.current}">
                            <li>
                                <a href="<c:out value="${link.url}" />" aria-current="page" class="pagination__link button button--secondary button--accent button--md" <c:if test="${not empty link.ariaLabel}">aria-label="${link.ariaLabel}"</c:if>>
                                    <c:out value="${link.label}" />
                                </a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li>
                                <a href="<c:out value="${link.url}" />" class="pagination__link button button--primary button--accent button--md" <c:if test="${not empty link.ariaLabel}">aria-label="${link.ariaLabel}"</c:if>>
                                    <c:out value="${link.label}" />
                                </a>
                            </li>
                        </c:otherwise>
                    </c:choose>
            </c:forEach>
            <c:if test="${not empty pagination.nextLink}">
                <li>
                    <a href="<c:out value="${pagination.nextLink.url}" />" class="pagination__link button button--tertiary button--accent button--md button--icon-only" <c:if test="${not empty pagination.nextLink.ariaLabel}">aria-label="${pagination.nextLink.ariaLabel}"</c:if>>
                        <kuik:icon title="${pagination.nextLink.label}" source="icon://ui/chevron-right" size="md"/>
                        <span class="visually-hidden"> <c:out value="${pagination.nextLink.label}"/></span>
                    </a>
                </li>
            </c:if>
            <c:if test="${not empty pagination.lastLink}">
                <li>
                    <a href="<c:out value="${pagination.lastLink.url}" />" class="pagination__link button button--tertiary button--accent button--md button--icon-only" <c:if test="${not empty pagination.lastLink.ariaLabel}">aria-label="${pagination.lastLink.ariaLabel}"</c:if>>
                        <kuik:icon title="${pagination.lastLink.label}" source="icon://ui/double-arrow-right" size="md"/>
                        <span class="visually-hidden"> <c:out value="${pagination.lastLink.label}"/></span>
                    </a>
                </li>
            </c:if>
        </ul>
    </nav>
</c:if>