Source

Pagination

Zolemba ndi zitsanzo zowonetsera zolemba zosonyeza mndandanda wazinthu zokhudzana nazo zilipo pamasamba angapo.

Mwachidule

Timagwiritsa ntchito maulalo ambiri olumikizidwa kumitundu yathu, zomwe zimapangitsa kuti maulalo akhale ovuta kuphonya komanso osavuta kuwonjeza-nthawi zonse ndikupereka madera akuluakulu. Pagination imapangidwa ndi mndandanda wazinthu za HTML kuti owerenga zenera athe kulengeza kuchuluka kwa maulalo omwe alipo. Gwiritsani ntchito <nav>chinthu chomangirira kuti muzindikire ngati gawo loyang'ana powonera owerenga ndi matekinoloje ena othandizira.

Kuphatikiza apo, popeza masamba ali ndi magawo opitilira amodzi otere, ndibwino kuti mupereke zofotokozera aria-labelkuti <nav>ziwonetse cholinga chake. Mwachitsanzo, ngati chigawo cha pagination chikugwiritsidwa ntchito poyang'ana pakati pa zotsatira zakusaka, chizindikiro choyenera chikhoza kukhala 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>

Kugwira ntchito ndi zithunzi

Mukuyang'ana kugwiritsa ntchito chithunzi kapena chizindikiro m'malo mwa mawu pamalumikizidwe amitundu? Onetsetsani kuti mukupereka chithandizo choyenera chowerengera chophimba ndi mawonekedwe aria.

<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>
      </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>
      </a>
    </li>
  </ul>
</nav>

Mayiko olumala komanso ogwira ntchito

Maulalo aPagination amasinthidwa mwamakonda pamikhalidwe yosiyanasiyana. Gwiritsani .disabledntchito maulalo omwe akuwoneka ngati osadina .activendikuwonetsa tsamba lomwe lilipo.

Pomwe .disabledkalasiyo imagwiritsa ntchito pointer-events: nonekuyesa kuletsa magwiridwe antchito a <a>s, katundu wa CSS sunakhazikitsidwebe ndipo samawerengera pa kiyibodi. Chifukwa chake, nthawi zonse muyenera kuwonjezera tabindex="-1"pa maulalo olemala ndikugwiritsa ntchito JavaScript kuti mulepheretse magwiridwe ake.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <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>

Mutha kusinthanso anangula omwe akugwira ntchito kapena olephereka a <span>, kapena kusiya nangula ngati mivi yapitayi / yotsatira, kuti muchotse magwiridwe antchito ndikuletsa kuyang'ana kwa kiyibodi ndikusunga masitayelo omwe mukufuna.

<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" aria-current="page">
      <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>

Kukula

Mukufuna zokhala zazikulu kapena zazing'ono? Onjezani .pagination-lgkapena .pagination-smma size owonjezera.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </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 active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </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>

Kuyanjanitsa

Sinthani masanjidwe a zigawo zapagination ndi zida za 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" aria-disabled="true">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" aria-disabled="true">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>