Le composant `pagination` permet d'afficher une pagination.
| Name |
Type |
Required |
Description |
| pagination |
fr.kosmos.web.kore.attributes.interfaces.Pagination |
true |
Information de la 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" %>
<%@ taglib prefix="resources" uri="resources" %>
<%@ 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>