Puslapių rašymas

Dokumentai ir pavyzdžiai, kaip rodyti puslapius, nurodančius, kad keliuose puslapiuose yra susijusio turinio serija.

Apžvalga

Puslapių rūšiavimui naudojame didelį sujungtų nuorodų bloką, todėl nuorodų sunku praleisti ir jas lengvai keisti, o kartu suteikiame dideles paspaudimo sritis. Puslapių skirstymas sukurtas naudojant sąrašo HTML elementus, todėl ekrano skaitytuvai gali pranešti galimų nuorodų skaičių. Naudokite įvyniojimo <nav>elementą, kad identifikuotumėte jį kaip ekrano skaitytuvų ir kitų pagalbinių technologijų naršymo skyrių.

Be to, kadangi puslapiuose greičiausiai yra daugiau nei viena tokia naršymo skiltis, patartina pateikti aprašą aria-label, <nav>kad atspindėtų jos paskirtį. Pavyzdžiui, jei puslapių rūšiavimo komponentas naudojamas naršyti tarp paieškos rezultatų rinkinio, tinkama etiketė gali būti 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>

Darbas su piktogramomis

Norite naudoti piktogramą ar simbolį vietoj teksto kai kuriose puslapių nuorodose? Būtinai suteikite tinkamą ekrano skaitytuvo palaikymą su ariaatributais ir .sr-onlyprograma.

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

Išjungtos ir aktyvios būsenos

Puslapių nuorodos yra pritaikomos įvairioms aplinkybėms. Naudokite .disablednuorodoms, kurių spustelėti negalima, ir .activedabartiniam puslapiui nurodyti.

Nors .disabledklasė pointer-events: nonebando išjungti s nuorodos funkcionalumą <a>, ta CSS ypatybė dar nėra standartizuota ir neapima klaviatūros naršymo. Todėl visada turėtumėte pridėti tabindex="-1"išjungtas nuorodas ir naudoti tinkintą „JavaScript“, kad visiškai išjungtumėte jų funkcijas.

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

Galite pasirinktinai pakeisti aktyvius arba išjungtus inkarus į <span>, arba praleisti inkarą, jei rodomos ankstesnės / kitos rodyklės, kad pašalintumėte spustelėjimo funkciją ir išvengtumėte klaviatūros fokusavimo išlaikant numatytus stilius.

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

Dydžio nustatymas

Norite didesnio ar mažesnio puslapių skaičiaus? Pridėti .pagination-lgarba .pagination-smpapildomų dydžių.

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

Lygiavimas

Pakeiskite puslapių spausdinimo komponentų lygiavimą su „ flexbox“ paslaugų programomis .

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