Source

Sivunumerointi

Asiakirjat ja esimerkit sivuttamisen osoittamisesta, mikä osoittaa, että useilla sivuilla on useita toisiinsa liittyviä sisältöjä.

Yleiskatsaus

Käytämme suurta joukkoa yhdistettyjä linkkejä sivutuksiimme, mikä tekee linkeistä vaikeasti huomaamattomia ja helposti skaalautuvia – kaikki samalla tarjoamalla suuria osumaalueita. Sivutus on rakennettu luettelo-HTML-elementeillä, jotta näytönlukijat voivat ilmoittaa käytettävissä olevien linkkien määrän. Käytä rivityselementtiä <nav>tunnistamaan se näytönlukuohjelmien ja muiden aputekniikoiden navigointiosiona.

Lisäksi, koska sivuilla on todennäköisesti useampi kuin yksi tällainen navigointiosio, on suositeltavaa antaa kuvaus aria-label, <nav>joka kuvastaa sen tarkoitusta. Jos esimerkiksi sivutuskomponenttia käytetään navigointiin hakutulosjoukon välillä, sopiva tunniste voisi olla 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>

Työskentely kuvakkeiden kanssa

Haluatko käyttää kuvaketta tai symbolia tekstin sijasta joissakin sivutuslinkeissä? Varmista, että annat oikeanlaisen näytönlukuohjelman tuen ariamääritteillä ja .sr-onlyapuohjelmalla.

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

Pois käytöstä ja aktiiviset tilat

Sivutuslinkit ovat muokattavissa erilaisiin olosuhteisiin. Käytä .disabledlinkkejä, joita ei voi napsauttaa, ja .activeosoittamaan nykyisen sivun.

Vaikka .disabledluokka pointer-events: noneyrittää poistaa käytöstä s:n linkkitoiminnot ,<a> tämä CSS-ominaisuus ei ole vielä standardoitu, eikä se ota huomioon näppäimistön navigointia. Siksi sinun tulee aina lisätä tabindex="-1"käytöstä poistettuja linkkejä ja käyttää mukautettua JavaScriptiä niiden toiminnan poistamiseksi kokonaan käytöstä.

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

Voit halutessasi vaihtaa aktiiviset tai käytöstä poistetut ankkurit tilalle <span>, tai jättää ankkurin pois edellisen/seuraavan nuolin tapauksessa poistaaksesi napsautustoiminnon ja estääksesi näppäimistön tarkennuksen säilyttäen samalla aiotut tyylit.

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

Mitoitus

Haluaisitko suuremman vai pienemmän sivutuksen? Lisää .pagination-lgtai .pagination-smlisäkokoja varten.

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

Tasaus

Muuta sivutuskomponenttien kohdistusta flexbox-apuohjelmien kanssa .

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