Paginación
Descubre la eficiencia de la Paginación de Quickly. Organiza tu contenido extenso en páginas fácilmente accesibles, ya sea un blog o una tienda en línea. Altamente personalizable, se adapta perfectamente a tu estética y funcionalidad. Simplifica la experiencia de tus usuarios y lleva la navegación de tu sitio web al siguiente nivel.
Paginación de bloque
Puedes Aplicar las clases .pagination-link-off para desabilitar el boton de inicio y .pagination-link-active para marcar el item activo. como se muestra en el ejemplo
.pagination
Ejemplo de barra de paginación y alineaciones izquierda, Centro y derecha.
Barra alineada a la izquierda
Barra alineada al centro
Barra alineada a la derecha
HTML
<!-- Barra alineada a la izquierda -->
<nav class="pagination-container grid align-hs" aria-label="...">
<ul class="pagination">
<li class="pagination-item"><a class="pagination-link-off" href="#">Anteriores</a></li>
<li class="pagination-item"><a class="pagination-link-active" href="#">1</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">2</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">3</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">Siguiente</a></li>
</ul>
</nav>
<!-- Barra alineada al centro -->
<nav class="pagination-container grid align-hc" aria-label="...">
<ul class="pagination">
<li class="pagination-item"><a class="pagination-link-off" href="#">Anteriores</a></li>
<li class="pagination-item"><a class="pagination-link-active" href="#">1</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">2</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">3</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">Siguiente</a></li>
</ul>
</nav>
<!-- Barra alineada a la derecha -->
<nav class="pagination-container grid align-he" aria-label="...">
<ul class="pagination">
<li class="pagination-item"><a class="pagination-link-off" href="#">Anteriores</a></li>
<li class="pagination-item"><a class="pagination-link-active" href="#">1</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">2</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">3</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">Siguiente</a></li>
</ul>
</nav>
Paginación de bloque
Puedes Aplicar las clases .pagination-link-off para desabilitar el boton de inicio y .pagination-link-active para marcar el item activo. como se muestra en el ejemplo
.pagination
Ejemplo de barra de paginación
Barra alineada a la izquierda
Barra alineada al centro
Barra alineada a la derecha
HTML
<!-- Barra alineada a la izquierda -->
<nav class="pagination-container grid align-hs" aria-label="...">
<ul class="pagination">
<li class="pagination-item-arrow">
<a class="pagination-link-off" href="#" >
<svg class="ico-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>
</a>
</li>
<li class="pagination-item"><a class="pagination-link-active" href="#">1</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">2</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">3</a></li>
<li class="pagination-item-arrow">
<a class="pagination-link" href="#">
<svg class="ico-16 ico-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>
</a>
</li>
</ul>
</nav>
<!-- Barra alineada a la centro -->
<nav class="pagination-container grid align-hc" aria-label="...">
<ul class="pagination">
<li class="pagination-item-arrow">
<a class="pagination-link-off" href="#" >
<svg class="ico-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>
</a>
</li>
<li class="pagination-item"><a class="pagination-link-active" href="#">1</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">2</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">3</a></li>
<li class="pagination-item-arrow">
<a class="pagination-link" href="#">
<svg class="ico-16 ico-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>
</a>
</li>
</ul>
</nav>
<!-- Barra alineada a la derecha -->
<nav class="pagination-container grid align-he" aria-label="...">
<ul class="pagination">
<li class="pagination-item-arrow">
<a class="pagination-link-off" href="#" >
<svg class="ico-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>
</a>
</li>
<li class="pagination-item"><a class="pagination-link-active" href="#">1</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">2</a></li>
<li class="pagination-item"><a class="pagination-link" href="#">3</a></li>
<li class="pagination-item-arrow">
<a class="pagination-link" href="#">
<svg class="ico-16 ico-secondary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>
</a>
</li>
</ul>
</nav>