Source

Pagination

Akwụkwọ na ihe atụ maka igosi pagination iji gosi usoro ọdịnaya metụtara dị n'ofe ibe.

Nchịkọta

Anyị na-eji nnukwu ngọngọ nke njikọ njikọ maka pagination anyị, na-eme ka njikọ siri ike na-atụfu na mfe scalable-niile mgbe na-enye nnukwu hit ebe. Ejiri ihe ndetu HTML wuo pagination ka ndị na-agụ enyo nwee ike ịkpọsa ọnụọgụ njikọ dị. Jiri ihe mkpuchi <nav>iji mata ya dị ka ngalaba nsoroụzọ iji lelee ndị na-agụ akwụkwọ na teknụzụ enyemaka ndị ọzọ.

Na mgbakwunye, dị ka ibe nwere ike inwe ihe karịrị otu ngalaba nsogharị dị otú ahụ, ọ dị mma ịnye nkọwa aria-labelmaka <nav>iji gosipụta ebumnuche ya. Dịka ọmụmaatụ, ọ bụrụ na ejiri akụkụ pagination mee njem n'etiti otu nsonaazụ ọchụchọ, akara kwesịrị ekwesị nwere ike ịbụ 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>

Arụ ọrụ na akara ngosi

Na-achọ iji akara ngosi ma ọ bụ akara n'ọnọdụ ederede maka ụfọdụ njikọ pagination? Jide n'aka na ịnye nkwado ndị na-agụ ihuenyo kwesịrị ekwesị na arianjirimara yana .sr-onlyuru.

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

Steeti nwere nkwarụ na arụ ọrụ

A na-ahazi njikọ pagination maka ọnọdụ dị iche iche. Jiri .disabledmaka njikọ ndị na-egosi enweghị ịpị na .activeigosi ibe dị ugbu a.

Ọ bụ ezie na .disabledklaasị na-eji pointer-events: noneagbalị gbanyụọ ọrụ njikọ nke <a>s, ihe onwunwe CSS ahụ ahazibeghị nke ọma yana ọ nweghị akaụntụ maka igodo igodo. Dị ka nke a, ị ga-agbakwunye tabindex="-1"na njikọ ndị nwere nkwarụ mgbe niile wee jiri Javascript omenala iji gbanyụọ ọrụ ha kpamkpam.

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

Ị nwere ike gbanwee arịlịka na-arụ ọrụ ma ọ bụ nwere nkwarụ maka <span>, ma ọ bụ hapụ arịlịka n'ihe gbasara akụ ndị gara aga/ na-esote, iji wepụ ọrụ pịa ma gbochie nleba anya ahụigodo ka ị na-ejigide ụdị echere.

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

Nha nha

Ọ na-amasị gị ibu ma ọ bụ obere pagination? Tinye .pagination-lgma ọ bụ .pagination-smmaka nha ndị ọzọ.

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

Nhazi

Gbanwee nhazi nke akụkụ pagination na ngwa 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>