Source

Pagination

Inyandiko n'ingero zo kwerekana pagination kwerekana urukurikirane rw'ibirimo bifitanye isano bibaho kurupapuro rwinshi.

Incamake

Dukoresha umurongo munini uhuza imiyoboro yacu, dukora amahuza bigoye kubura kandi byoroshye - byose mugihe dutanga ahantu hanini cyane. Pagination yubatswe nurutonde rwa HTML kugirango abasomyi ba ecran bashobore gutangaza umubare wibihuza bihari. Koresha ikintu cyo gupfunyika <nav>kugirango umenye nkigice cyo kugendana kugirango usome abasomyi nubundi buryo bwikoranabuhanga bufasha.

Mubyongeyeho, nkurupapuro rushobora kuba rufite igice kirenze kimwe cyo kugendagenda, nibyiza gutanga ibisobanuro aria-labelkugirango <nav>Uwiteka agaragaze intego yacyo. Kurugero, niba ibice bigize pagination bikoreshwa mukugenda hagati yishakisha ryibisubizo, ikirango gikwiye gishobora 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>

Gukorana n'amashusho

Urashaka gukoresha igishushanyo cyangwa ikimenyetso mu mwanya winyandiko kuri pagination zimwe? Wemeze gutanga ibisobanuro bikwiye byabasomyi hamwe arianibiranga .sr-onlyakamaro.

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

Abamugaye kandi bakora

Guhuza paji birashobora guhindurwa mubihe bitandukanye. Koresha .disabledamahuza agaragara adashobora gukanda no .activekwerekana page iriho.

Mugihe .disabledicyiciro gikoresha pointer-events: nonekugirango ugerageze guhagarika imikorere yimikorere ya <a>s, uwo mutungo wa CSS nturashyirwaho kandi ntabwo ubazwa kugendana na clavier. Nkibyo, ugomba guhora wongeyeho tabindex="-1"kumurongo wamugaye kandi ugakoresha JavaScript yihariye kugirango uhagarike imikorere yabo.

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

Urashobora guhitamo guhinduranya ibikorwa cyangwa byahagaritswe inanga ya <span>, cyangwa gusiba inanga mugihe cyambere / imyambi ikurikira, kugirango ukureho gukanda no gukumira icyerekezo cya clavier mugihe ugumana uburyo bugenewe.

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

Ingano

Ibyiza binini cyangwa bito? Ongeraho .pagination-lgcyangwa .pagination-smkubunini bwinyongera.

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

Guhuza

Hindura guhuza ibice bya pagination hamwe nibikoresho bya 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>