Leheküljed

Dokumentatsioon ja näited lehekülgede näitamiseks, mis näitavad, et mitmel lehel on seotud sisu seeria.

Ülevaade

Kasutame lehitsemiseks suurt plokki ühendatud linke, muutes lingid raskesti kahe silma vahele ja hõlpsasti skaleeritavaks – pakkudes samal ajal suuri tabamusalasid. Leheküljed on üles ehitatud loendi HTML-i elementidega, et ekraanilugejad saaksid teatada saadaolevate linkide arvu. Kasutage ümbriselementi <nav>, et tuvastada see ekraanilugejate ja muude abitehnoloogiate navigeerimisjaotisena.

Lisaks, kuna lehtedel on tõenäoliselt rohkem kui üks selline navigeerimisjaotis, on soovitatav esitada aria-labelselle <nav>eesmärgi kajastamiseks kirjeldus. Näiteks kui lehekülgede jagamise komponenti kasutatakse otsingutulemuste komplekti vahel navigeerimiseks, võib sobiv silt 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>

Töö ikoonidega

Kas soovite mõne lehekülgede vahetamise lingi jaoks kasutada teksti asemel ikooni või sümbolit? ariaPakkuge atribuutide ja .sr-onlyutiliidiga kindlasti korralikku ekraanilugeja tuge .

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

Keelatud ja aktiivsed olekud

Leheküljelingid on kohandatavad erinevatel asjaoludel. Kasutage .disabledlinkide jaoks, mis näivad olevat klõpsamatud, ja .activepraeguse lehe näitamiseks.

Kuigi .disabledklass kasutab s pointer-events: none- i lingifunktsiooni keelamiseks <a>, pole see CSS-i atribuut veel standardiseeritud ega arvesta klaviatuuriga navigeerimist. Seetõttu peaksite alati lisama tabindex="-1"keelatud lingid ja kasutama nende funktsioonide täielikuks keelamiseks kohandatud JavaScripti.

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

Soovi korral saate aktiivsed või keelatud ankrud välja vahetada <span>või eelmiste/järgmiste noolte puhul ankru välja jätta, et eemaldada klõpsamisfunktsioon ja vältida klaviatuuri teravustamist, säilitades samal ajal kavandatud stiilid.

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

Suuruse määramine

Kas soovite suuremat või väiksemat lehekülge? Lisa .pagination-lgvõi .pagination-smlisasuuruste jaoks.

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

Joondamine

Muutke lehekülgede muutmise komponentide joondust flexboxi utiliitidega .

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