Source

Sideinddeling

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".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Arbejde med ikoner

Ønsker du at bruge et ikon eller symbol i stedet for tekst til nogle sideinddelingslinks? Sørg for at give korrekt skærmlæserunderstøttelse med ariaattributter og .sr-onlyhjælpeprogrammet.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

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"

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

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.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Dimensionering

Kunne du tænke dig større eller mindre paginering? Tilføj .pagination-lgeller .pagination-smfor yderligere størrelser.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Justering

Skift justeringen af pagineringskomponenter med flexbox-værktøjer .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>