Documentación e exemplos para mostrar a paxinación para indicar que existe unha serie de contido relacionado en varias páxinas.
Visión xeral
Usamos un gran bloque de ligazóns conectadas para a nosa paxinación, o que fai que as ligazóns sexan difíciles de perder e facilmente escalables, todo ao tempo que ofrece grandes áreas de acceso. A paxinación está construída con elementos HTML de listas para que os lectores de pantalla poidan anunciar o número de ligazóns dispoñibles. Use un elemento de envoltura <nav>para identificalo como sección de navegación para lectores de pantalla e outras tecnoloxías de asistencia.
Ademais, como é probable que as páxinas teñan máis dunha sección de navegación deste tipo, é recomendable proporcionar unha descripción aria-labelpara <nav>reflectir o seu propósito. Por exemplo, se o compoñente de paxinación se usa para navegar entre un conxunto de resultados de busca, unha etiqueta adecuada podería ser aria-label="Search results pages".
Traballar con iconas
Queres usar unha icona ou un símbolo en lugar do texto para algunhas ligazóns de paxinación? Asegúrate de proporcionar soporte adecuado para o lector de pantalla cos ariaatributos e a .sr-onlyutilidade.
Estados activos e desactivados
As ligazóns de paxinación pódense personalizar para diferentes circunstancias. Utilízase .disabledpara ligazóns que aparecen sen facer clic e .activepara indicar a páxina actual.
Aínda que a .disabledclase adoita tentarpointer-events: none desactivar a función de ligazón de s, esa propiedade CSS aínda non está estandarizada e non ten en conta a navegación do teclado. Polo tanto, sempre debes engadir ligazóns desactivadas e usar JavaScript personalizado para desactivar completamente a súa funcionalidade.<a>tabindex="-1"
Opcionalmente, pode cambiar as áncoras activas ou desactivadas por <span>, ou omitir a áncora no caso das frechas anterior/seguinte, para eliminar a función de clic e evitar o foco do teclado mantendo os estilos previstos.
Talla
Queres unha paxinación máis grande ou máis pequena? Engadir .pagination-lgou .pagination-smpara tamaños adicionais.
Aliñación
Cambia o aliñamento dos compoñentes de paxinación coas utilidades flexbox .