Source

Amakhasi

Amadokhumenti nezibonelo zokubonisa ukuphequlula ukuze kuboniswe uchungechunge lokuqukethwe okuhlobene lukhona kumakhasi amaningi.

Uhlolojikelele

Sisebenzisa ibhulokhi enkulu yezixhumanisi ezixhunyiwe ukuze senze amaqebelengwane ethu, okwenza izixhumanisi kube nzima ukuzigeja futhi zikhule kalula—konke lokhu kuhlinzeka ngezindawo ezinkulu ezishayekayo. I-Pagination yakhiwe ngezinto ze-HTML zohlu ukuze abafundi besikrini bakwazi ukumemezela inombolo yezixhumanisi ezitholakalayo. Sebenzisa into egoqayo <nav>ukuze uyikhombe njengesigaba sokuzulazula kuzifundi zesikrini nobunye ubuchwepheshe obusizayo.

Ngaphezu kwalokho, njengoba amakhasi anengxenye enjalo yokuzulazula engaphezu kweyodwa, kuyatuseka ukunikeza incazelo aria-labelukuze <nav>ibonise injongo yayo. Isibonelo, uma ingxenye ye-pagination isetshenziselwa ukuzulazula phakathi kwesethi yemiphumela yosesho, ilebula efanelekile ingaba 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>

Ukusebenza ngezithonjana

Ingabe ufuna ukusebenzisa isithonjana noma uphawu esikhundleni sombhalo kwezinye izixhumanisi zamaphegina? Qiniseka ukuthi unikeza ukwesekwa okufanele kwesifundi sesikrini ngezibaluli ariakanye .sr-onlynokusetshenziswa.

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

Izimo ezikhubazekile nezisebenzayo

Izixhumanisi zamakhasi zingenziwa ngendlela oyifisayo ezimeni ezahlukene. Sebenzisa .disabledizixhumanisi ezibonakala zingachofozeki kanye .activenokukhombisa ikhasi lamanje.

Ngenkathi .disabledikilasi lisebenzisa pointer-events: noneukuzama ukukhubaza ukusebenza kwesixhumanisi kwe- <a>s, leso sici se-CSS asikakamiswa futhi asibali ukuzulazula kwekhibhodi. Kanjalo, kufanele uhlale ungeza tabindex="-1"kuzixhumanisi ezikhutshaziwe futhi usebenzise i-JavaScript yangokwezifiso ukuze ukhubaze ngokugcwele ukusebenza kwazo.

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

Ungakwazi ukukhetha ukushintsha amahange asebenzayo noma avaliwe wenze okuthi <span>, noma ushiye ihange esimweni semicibisholo eyandulele/elandelayo, ukuze ususe ukusebenza kokuchofoza futhi uvimbele ukugxila kwekhibhodi kuyilapho ugcina izitayela ezihlosiwe.

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

Ukulinganisa

Uyathanda ukuqanjwa okukhudlwana noma okuncane? Engeza .pagination-lgnoma .pagination-smosayizi abengeziwe.

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

Ukuqondanisa

Shintsha ukuqondanisa kwezingxenye zephegination ngezinsiza ze- flexbox .

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