Dokumentation og eksempler til at vise paginering for at angive, at en række relateret indhold findes på tværs af flere sider.
Oversigt
Vi bruger en stor blok af forbundne links til vores paginering, hvilket gør links svære at gå glip af og let skalerbare – alt imens vi giver store hitområder. Sideinddeling er bygget med liste HTML-elementer, så skærmlæsere kan annoncere antallet af tilgængelige links. Brug et indpakningselement <nav>til at identificere det som en navigationssektion til skærmlæsere og andre hjælpeteknologier.
Derudover, da sider sandsynligvis har mere end én sådan navigationssektion, er det tilrådeligt at give en beskrivende aria-labelfor <nav>at afspejle dens formål. For eksempel, hvis pagineringskomponenten bruges til at navigere mellem et sæt søgeresultater, kunne en passende etiket være aria-label="Search results pages".
Arbejde med ikoner
Ønsker du at bruge et ikon eller symbol i stedet for tekst til nogle sideinddelingslinks? Sørg for at give ordentlig skærmlæsersupport med ariaattributter.
Deaktiveret og aktiv tilstand
Sideinddelingslinks kan tilpasses til forskellige omstændigheder. Bruges .disabledtil links, der ikke kan klikkes på, og .activetil at angive den aktuelle side.
Mens .disabledklassen forsøgerpointer-events: none at deaktivere linkfunktionaliteten i s, er denne CSS-egenskab endnu ikke standardiseret og tager ikke højde for tastaturnavigation. Som sådan bør du altid tilføje deaktiverede links og bruge tilpasset JavaScript for fuldt ud at deaktivere deres funktionalitet.<a>tabindex="-1"
Du kan valgfrit udskifte aktive eller deaktiverede ankre med <span>, eller udelade ankeret i tilfælde af de foregående/næste pile, for at fjerne klikfunktionalitet og forhindre tastaturfokus, mens du beholder tilsigtede stilarter.
Dimensionering
Kunne du tænke dig større eller mindre paginering? Tilføj .pagination-lgeller .pagination-smfor yderligere størrelser.
Justering
Skift justeringen af pagineringskomponenter med flexbox-værktøjer .